Thunbnails not aligning properly

I’m attempting to complete a product page of 3 column thumbnails using the following code however the second row indents slightly meaning the it only has 2 thumbs and the 3rd carries onto the third row(also indented)

<ul class="thumbnails">
	<li class="span4">
<div class="thumbnail">
<div class="caption">
<h5 style="text-align: center;">Product detail</h5>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="text-align: center;"><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div></li>
	<li class="span4">
<div class="thumbnail">
<div class="caption">
<h5 style="text-align: center;">Product detail</h5>
<p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p style="text-align: center;"><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div></li>
!SEQUENCE REPEATING FOR 6 THUMBS THEN...
</ul>

I copied and butchered this code from another site and have tried a few variations but nothing fixes it so far. In the ‘visual’ view of editing it looks perfect but not on the desktop site version.