title: Horizontally aligning list elements with relative divs in them
body: <p>For the past two hours I have been trying to horizontally align an unordered list of card elements. </p>
  
  <p>This is my HTML:</p>
  
  <pre><code>  &lt;div id="hand-list"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;card&gt;&lt;/card&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;card&gt;&lt;/card&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>This is my CSS:</p>
  
  <pre><code>div#hand-list ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
      max-width: 170px;
      float: left;
  }
  
  div#hand-list ul li {
      display: inline-block;
  }
  
  .card {
      position: relative;
      background: #e3e3e3;
      border-radius: 5px;
      cursor: pointer;
      width: 150px;
      height: 90px;
      box-shadow: 0 1px 1px;
  }
  </code></pre>
  
  <p>What am I doing wrong? I just get them vertically stacked all the time?</p>
  
  <p>At a fundamental level, a card is the following (which is just a bit of AngularJS): </p>
  
  <pre><code>&lt;div class="card" shift&gt;
      &lt;div class="card-header"&gt;
          &lt;h4&gt;{{ user.firstName | limitTo:10 }} {{ user.lastName | limitTo:1 }}.&lt;/h4&gt;
      &lt;/div&gt;
      &lt;div class="card-body"&gt;
      &lt;/div&gt;
      &lt;div class="card-footer"&gt;
          {{ user.label }}
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>