Edit in JSFiddle

<div class="gallery">
<h1>Total width 300px</h1>
    <div class="item">
        <img src="http://lorempixel.com/100/100/food/100x100 margin 0" alt="food">
    </div>
    <div class="item">
        <img src="http://lorempixel.com/100/100/food/100x100 margin 0" alt="food">
    </div>
    <div class="item">
        <img src="http://lorempixel.com/100/100/food/100x100 margin 0" alt="food">
    </div>
</div>

h1 {
    font-size: 2em;
    font-weight: 900;
    margin-bottom: .85em;
}
.gallery {
    width: 300px;
    margin: 0 auto;
    background: slateGrey;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
    color: seaShell;
    zoom: 1;
}

  .gallery:before,
  .gallery:after {
    content: " ";
    display: table;
  }

  .gallery:after {
    clear: both;
  }

.item {
    /*display: inline-block;    
    zoom: 1;*/
    float: left;
    width: 100px;
    background: oliveDrab;
    height: 100px;
    /*margin-right: -0.25em;*/
    margin: 0;
}