Bootstrap row align issue

The images should align together so there is two images on one row and one on the row below. However all the images stack on top of eachother. I know that it is something to do with the nav bar as the problem disappears when the nav bar is removed, even though the nav bar is in another container. JSFiddle link

   <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 col-sm-12">
                <img src="http://ift.tt/2l87Ji3" alt="Smiley face" height="42" width="42">
            </div>
            <div class="col-md-6 offset-md-6 col-sm-12">
                <img src="http://ift.tt/2l87Ji3" alt="Smiley face" height="42" width="42">
            </div>
            <div class="col-md-6 col-sm-12">
                <img src="http://ift.tt/2l87Ji3" alt="Smiley face" height="42" width="42">
            </div>
        </div>
    </div>

Also note that I have a problem with the image aligning under the nav bar, if you extend or shrink the result panel width them you can see the images. I'm not sure whether this issue is related.