Aligning Products in Row using grid layout

Question

Morning, fine folks! I am having a beast of time with a newly discovered issue in my layout. I've tried everything that I know to do, to no avail. I know the answer must be a simple one, but darned if I can figure it out.

I have a product page (using Exp:resso Store) that I'm attempting to update with a new design to match the rest of the website. I'm using THIS grid.css (that someone, either from here or the EE forums, povided me with), and while it works beautifully for my categories page (which has this brand new layout applied to it), it's not working for the product listings page:

.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}

/*  GROUPING  ============================================================================= */


.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

/*  GRID COLUMN SETUP   ==================================================================== */

.col2 {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
    text-align: center;
    background-color: #FFF;
    border-radius: .5em;
    height: 220px;
}

.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
    text-align: center;
}

.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/*  REMOVE MARGINS AS ALL GO FULL WIDTH AT 480 PIXELS */

@media only screen and (max-width: 480px) {
    .col { 
        margin: 1% 0 1% 0%;
    }
}

/*  GRID OF FOUR   ============================================================================= */

.span_4_of_4 {
    width: 100%;
}

.span_3_of_4 {
    width: 74.6%; 
}

.span_2_of_4 {
    width: 49.2%; 
}

.span_1_of_4 {
    width: 23.8%; 
}


/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */

@media only screen and (max-width: 480px) {
    .span_4_of_4 {
        width: 100%; 
    }
    .span_3_of_4 {
        width: 100%; 
    }
    .span_2_of_4 {
        width: 100%; 
    }
    .span_1_of_4 {
        width: 100%; 
    }
}

And here is the code on the page for it:

{exp:store:search orderby="category" sort="asc"}
{exp:store:product entry_id="{entry_id}"}

{if count %  4 == 1}
<div class="section group" reveal-fx="RevealFX17">
{/if}

<div class="col span_1_of_4">
<h2><a href="{url_title_path='shoppe/product'}">{title}</a></h2>
<p><img class="imgsm" src="{product_image}"></p>
<p>
{if on_sale}
<del>{regular_price}</del>
{price}
<span class="label label-success">Save {you_save} ({you_save_percent}%)</span>
{if:else}
{price}
{/if}
</p>
<p>
<a href="{url_title_path='shoppe/product'}" class="btn">Info/Purchase</a>
</p>
</div>

{if count %  4 == 0 || count == total_results}
</div>
{/if}

{/exp:store:product}
{/exp:store:search}

I've tried adding a linear conditional, changing the image sizes, removing the RevealFX, re-arranging the code, etc. None of this changes the fact that the page (found HERE) is displaying them stacked down the page instead of in rows of 4 products per row, which is what I'm going for. As far as I can see, there's no conflicting CSS, as it would render on the category page I created, so I'm stumped for sure. Advice appreciated! :) Thanks folks!