inline-list filled with divs not displaying correctly with twitter bootstrap

Question

I'm trying to create an unordered list to display a series of divs that'll all be 140px by 140px and are dynamically populated depending on the number of items in an array via jquery.

However they're not displaying in a straight horizontal line with the code I have and I'd like to fix that.

HTML

<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="product-list">
            <ul class="list-inline">
            </ul>
        </div>
    </div>
</div>

Jquery to populate the list:

JQUERY

productLoad: function() {
    for (var i = 0; i < state.greens.length; i++) {
        $(".product-list ul").append("<li><div class='product'><p> " + state.greens[i].name + " </p></div></li>");
    }
},

The function productLoad is part of an object called display and is called by display.productLoad();

I use the following CSS for .product:

CSS

.product {
width: 140px;
height: 140px;
background-color: #006B3C;
opacity: 0.6;
padding: 5px;
}

.product p {
color: #fff;
text-transform: uppercase;
font-size: 16px;
text-align: center;
}

I suspect my problem is the CSS but I'm not sure what would be causing the alignment errors. Some of the squares bleed into the one below it and they're not in a straight horizontal line like I want.

You can see the results here: superfood picker

Scroll to the section that says 'Click on a product to go to its detail page' and you'll see the unaligned list of divs.

Answer 1

Add vertical-align: top to the CSS for the .list-inline>li