Issue on Ordering Thumbnails in bootstrap 3 - css

Question

Hi I am trying to create simple slider for displaying latest product on the page using Bootstrap 3 at This DEMO. I have 6 thumbnails in a gallery div which I would like to display only 4 of them in front view and slide to left to see two more. I used bootstrap
<ul class="list-inline">
<li>...</li>
</ul>
css to render a display: inline-block; list of my <li>s but I do not know why they are not fitting in one line and 2 last items displays at the buttom of the gallery box. BESIDES the first <li> looks taller (Even if I have only 4 <li>).
Now my questions are:
1 - Why The First item Looks taller than the rest?
2 - Why Items are not displaying in a line?
3 - Finally why the overflow: hidden; property in .gallery is not performing properly?
and here is my code:
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:325px;
}
<!-- About Section -->
<section id="ft" class="cbp-so-section cbp-so-init">
<div class="container cbp-so-side cbp-so-side-top">
<h4>Latest Features</h4>
<div class="row">
<div class="well gallery col-lg-12 col-md-12 col-sm-2 col-xm-1">
<ul class="list-inline">
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
<li class="col-sm-3">
<div class="well"><img src="http://placehold.it/500x500" alt="Image" class="img-responsive"></div>
</li>
</ul>
</div>
</div>
</div>
</section>

Answer 1

Playing a bit with Firebug, I found that the issue here is because of the following rule:
.list-inline > li:first-child {
padding-left: 0;
}
All the .list-inline > li elements have a padding-left:5px rule, expect the first child. Because of that missing padding in the first child, the img inside has 5px more width (because of the max-width:100%; rule).
If you set the width of the img in pixels, you will not have this issue.
Regarding the (2) question, the bootstrap grid system requires that in one row the number sum of the col-sm-* is 12. You need to change in from col-sm-3 to col-sm-2 to have all 6 items in one line.
Regarding the (3) question, I am not sure what exactly you are expecting to see.
EDIT 2: See this link for a CSS fix http://bootply.com/111878
.gallery {
margin: 0 auto;
overflow: hidden;
width: 100%;
position: relative;
max-height:310px;
}
.list-inline img.img-responsive {
height: 233px;
width: 233px;
}