Center inline-block list

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?

https://gyazo.com/797bc2388bb1db8d6b474411478a57cb

I want to completely center all of the inline-blocks.

.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;
}

<div class="list">

  <div class="entry">
    <button class="title btn btn-primary">Full Metal Panic!</button>
    <div class="description">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.</div>
    <img src="http://cdn.myanimelist.net/images/anime/2/75259.jpg"></img>
    <button class="info info-episodes btn btn-primary">
      <div class="pull-left">EPISODES</div>24</button>
    <button class="info info-rating btn btn-warning">
      <div class="pull-left">RATING</div>R</button>
  </div>

</div>

Solution

For inline-block elements, you can center them vertically with text-align:center;

About the margin space, when an element is inline, it automatically has a margin to space elements, like spans or links, on a paragraph. It's the way that kind of display behave.

There are a few workarounds to fix that margin, like seeting the font-size of the parent to 0 or givint it -4px of margin-right.

Some workarounds are explained on CSSTricks, Fighting the Space Between Inline Block Elements.

Although display:inline-block is very simple, some would suggest you use floated elements for spacing perfection. In this case, if the margin thing isn't bothering much, go with it.

Somethings about your code:

Try to make a list of buttons into... a list of buttons, wrap them up on ul li (for the buttons under the image), it would be semantically correct and easier to style;
Try not to use DIV inside BUTTON. BUTTON is displayed as inline and DIV as block, you can use SPAN to style some chunks of text instead.
Since the description is aparagraph of text, you could wrap it up on a P element, it would be semantically better (SEO)

Pen