Over-riding wordpress theme css rows not working

This is a bit hard to explain. Look at the site and you will see what I mean by product rows. http://stephanieh57.staging.wpengine.com/shop/
Each page displays 48 products.

If you have a screen wide enough you should see 4 items per row.
12 rows. Go to the bottom and click page 2 on the pagination. You will get a glitch in row 3 which only shows 1 item. Click to see page 3 and you will get a perfect 12 rows again.
If you only see 3 items per row on your screen
it should be 16 rows. The first page of products has a glitch in row 11 showing only 2 products.
Click pagination at the bottom to go to page 2, there is a bug in row 4
Page 3 is perfect

I am working with a wordpress theme. I have created a child theme and my CSS is in that child themes style.css. file
My theory was that by removing any “clear” css, and making margins even and small enough the rows would just flow normally.
I thought I had it working. I want my rows to flow evenly. I removed the clear:both that was set on items with the classes of first and last
Hope someone is smarter than me!

ul.products li.product,
ul.products li.product.last,
ul.products li.product.first {
	clear: none !important;
#main ul.products li.product,
#main ul.products li.product.last,
#main ul.products li.product.first,
ul.products li.product:nth-child(2n) {
	margin-left: 14px !important;
	margin-right: 14px !important;

no ideas?
Keeping it simple, I thought the clear:none, should make all of the divs with products flow normally. Just like if you just put a bunch of basic divs inside a bigger one. But I still get ‘holes’