title: Center inline-block list
body: <p>How can i center inline-blocks inside a div?
  When a next line appears there is an invisible margin on the right which I cant't seem to get rid of. How do i remove it?</p>
  
  <p><a href="https://gyazo.com/797bc2388bb1db8d6b474411478a57cb" rel="nofollow">https://gyazo.com/797bc2388bb1db8d6b474411478a57cb</a></p>
  
  <p>I want to completely center all of the inline-blocks.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.list {
    margin: 0px auto;
    height: 100%;
    width: 90%;
    background-color: gray;
  }
  .entry {
    display: inline-block;
    float: left;
    width: 225px;
    margin: 8px;
    box-shadow: 5px 5px 5px #888888;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="list"&gt;
  
    &lt;div class="entry"&gt;
      &lt;button class="title btn btn-primary"&gt;Full Metal Panic!&lt;/button&gt;
      &lt;div class="description"&gt;Seventeen-year-old Sousuke Sagara, a sergeant working for Mithril, has been assigned to protect Kaname Chidori. He is ordered to join her high school class and be as close to her as possible to prevent her from falling into enemy hands, that is, if
        he can safely blend in with their fellow classmates without revealing his true identity.&lt;/div&gt;
      &lt;img src="http://cdn.myanimelist.net/images/anime/2/75259.jpg"&gt;&lt;/img&gt;
      &lt;button class="info info-episodes btn btn-primary"&gt;
        &lt;div class="pull-left"&gt;EPISODES&lt;/div&gt;24&lt;/button&gt;
      &lt;button class="info info-rating btn btn-warning"&gt;
        &lt;div class="pull-left"&gt;RATING&lt;/div&gt;R&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>