Align objects

Why do I get whitespace at the bottom of the divs?

by garland_briggs

HTML

<div class="container group">
    <div class="marginfix-wrapper">
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
        <div class="product">
            <img src="http://dummyimage.com/194x128/ff0000/fff.png">
        </div>
    </div>
</div>

CSS

/* clearfix */
 .group:after {
    content:"";
    display: table;
    clear: both;
}
.container {
    width: 602px;
    background-color: gray;
}
.marginfix-wrapper {
    margin-right: -10px;
}
.product {
    float: left;
}
.product img {
    width: 194px;
    margin: 0 10px 0 0;
}