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

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