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://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42">
</div>
<div class="col-md-6 offset-md-6 col-sm-12">
<img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" alt="Smiley face" height="42" width="42">
</div>
<div class="col-md-6 col-sm-12">
<img src="http://media.istockphoto.com/photos/frog-picture-id175397603?k=6&m=175397603&s=170667a&w=0&h=niKhE-PmYumUHrQa4akcU2cRcmmJMx9_dtWYAcDtJBw=" 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.
I think in reading your css you just forgot to add the class main in your div just after your nav.
JsFiddle : https://jsfiddle.net/hbm23ras/
Start of html
<body>
<nav class="navbar navbar-inverse sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
<li class="active"><a href="statistics.html">efefefef<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
<li ><a href="">blah<i class="pull-right hidden-xs showopacity" aria-hidden="true" style="font-size:20px;"></i></a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid main"> // <------- HERE