Blog Post Thumbnails Not Aligning Correctly

Hi, I wrapped a div tag (.blog-category) around the posts loop for my category page so that I could target the following CSS to my category posts page:

.blog-category .article {display:inline-block;width:142px;padding-right:10px}
.blog-category .article img {width:142px;height:142px;}
.blog-category .article-title {position:absolute;width:142px !important;font-size:12px;text-align:center;margin-top:142px;}
.article .entry-utility, .blog-category .article p {display:none;}

Everything looks good until there are more posts than will show on one page. Then the thumbnails are aligning to the left – I tried adding float:none !important; but that didn’t help.

Here’s a link to the problem

And here’s what a page looks like with no pagination (all posts fit on one page). This is how the above, problem page should look. How can I fix this? Thanks in advance for your help!