Div centered within a div

by Jordan Dayton

HTML

<h1>
Follow the CanvasLIVE Luminaries!
</h1>
<br />
<div id="wrapper">
    <div id="card">
      <div class="card-background">
      <a href="https://community.canvaslms.com/people/[email protected]" target="_top"><img src="https://community.canvaslms.com/resources/statics/112650/ryan_seilhamer.png?a=1471487821891"></a>  
        <div class="name">
          <h2><a href="https://community.canvaslms.com/people/[email protected]">RYAN SEILHAMER</a></h2>
        </div>
        <div class="text-box">
          <p>Ryan has earned multiple 'keynote' badges for his work in CanvasLIVE. With over a dozen recorded sessions, Ryan is well-known for his passion for all-things-mobile. Co-founder of CMUG, he drives discussions around mobile design, delivery and engagement. Don't miss his next event!</p>
           </div>
      </div>
    </div>

    <div id="card">
      <div class="card-background">
      <a href="https://community.canvaslms.com/people/panda" target="_top"><img src="https://community.canvaslms.com/resources/statics/112650/panda.png?a=1471488562907"></a>  
        <div class="name">
          <h2><a href="https://community.canvaslms.com/people/panda">YOUR NAME... SOON?</a></h2>
        </div>
        <div class="text-box">
          <p>Do you have what it takes?</p>
          <p>If you do, then don't be surprised when you show up on this wall o' fame!</p>
         <p>Anyone can be a CanvasLIVE luminary, but you gotta do some awesome stuff, like Ryan S ;-)</p>
           </div>
      </div>
    </div>
</div>

<br />
<br />
<br />
<br />
<br />

<h1>
Introducing the headlining CanvasLIVE institutions!
</h1>
<br />
<div id="wrapper">
    <div id="card">
      <div class="card-background-head">
      <a href="https://community.canvaslms.com/community/ideas/canvaslive/events-list/?eventFilter=all&tag=ucf" target="_top"><img class="headliners" src="https://community.canvaslms.com/resources/statics/112650/headliner_ucf.png?a=1471493855161"></a>  
       ...

CSS

#wrapper {
  overflow:hidden;
  text-align: center;
  width: 100%;
  float: center;
  display: inline-block;
  }

#card {
  overflow:hidden;
  float:center;
  padding: 10px;
  text-align: center;
  width: 350px;
  height: 400px;
  display: inline-block;
  }
  
.card-background {
  background-color: #d2f0f9;
  width: 100%;
  text-align: center;
  height: 350px;
  }

.name {
  width: 300px;
  text-align: center;
  margin-top: 5px;
  display: inline-block
  }

.text-box {
  width: 300px;
  height: 165px;
  background-color: #57C8E7;
  text-align: left;
  margin-top: 10px;
  position: relative;
  display: inline-block;
  }

.card-background-head {
  background-color: #d2f0f9;
  width: 100%;
  text-align: center;
  height: 320px;
  }

.headliners {
  margin-top:30px;
  }
  
img:hover {
    opacity: 0.6;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
  
p {
  color: #fff;
  font: 15px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  padding-left: 15px;
  padding-right: 15px;
  text-align: justify;
  }
  
h1 {
  font: 22px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #E53C2E;
  font-weight: bold;
  text-align: center;
  }

h2 {
  font: 18px "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #58585B;
  font-weight: bold;
  text-align: center;
  }
  
img {
  margin-top:30px;
  }
  
a:link {
  text-decoration: none;
  color: #58585B;
  }

a:visited {
  text-decoration: none;
  color: #58585B;
  }

a:hover {
  text-decoration: underline;
  color: #E53C2E;
  }

a:active {
  text-decoration: underline;
  }