Product display is irregular

Question

I asked this on a ticket because the layout is a BC standard template, and got rebuffed because it wasn't "their problem"    
Anyway:
http://joden.businesscatalyst.com/antique-jewelry?Page=1&Items=20
I am getting a weird layout problem on pages with many images. Although I have selected 4 images to be displayed on a line I've encountered two problems.
1. as you can see from the above page, the first line of images is displaying only 3 images, where ItemLast is appearing on the next line. All images are the same size, so I'm not sure why this is happening.
2. I was getting an error where 4 or 5 lines of images would be followed by a new line that would only have 2 images on it, floated right.
To see the different display effects, modify style.css line 1087 and remove
clear: both; from the css and you will see the first line show 4 images but some lines only 2 floated right.
see behavior here: http://screencast.com/t/bp4hAhuXkqKH

Answer 1

Liam,
The only reason I was modifying the CSS is because the layout was not working properly in the first place from the BC template.   So I did what you suggested, however, as you can see  on the  fourth row,  the row is indenting and starting  1/2 row over. 
https://joden.worldsecuresystems.com/antique-jewelry
I can't see what CSS would be causing that since there is plenty of room and the new item CSS is supposed to float left.
style.css: 1081
.productSmall li, .productfeaturelist li {
padding: 0 10px 20px 0;
width: 222px;
float: left;
list-style: none outside none;