Добрый день! Есть код html.
<div class="product">
<img src="images/product/<?echo $item['img']?>" width="190px" alt="<?echo $item['title']?>"/>
<hr/>
<div class="head"><?echo $item['title']?></div>
<form>
<div class="label">Оптическая сила, D:</div>
<select class="sel">
<option>-10,00</option>
<option>-19,00</option>
<option>-20,00</option>
</select>
<div class="label">Радиус кривизны, мм:</div>
<select class="sel">
<option>-10,00</option>
<option>-19,00</option>
<option>-20,00</option>
</select>
<div class="basket">
<?echo $item['price']?> тг.
<button>Добавить<span></span></button>
</div>
</form>
</div>
Есть CSS
/product/
section.wrapper .product {display:inline-block; width:212px; height:381px; border:1px solid #eaeaea; background:#fff; padding:36px 9px 22px 9px;
text-align:center; margin:0 16px 20px 0; position:relative;}
section.wrapper .product hr {border:none; background:#dcdcdc; height:1px; margin:15px 0 10px 0;}
section.wrapper .product .head {padding:0 20px; line-height:15px;}
section.wrapper .product form {margin:15px 0; padding:0;}
section.wrapper .product form .label {width:130px; display:inline-block; text-align:left; margin:0 0 10px 0;}
ect {width:70px; display:inline-block; border:1px solid #c5c5c5;}
section.wrapper .product .basket {position:absolute; bottom:22px; left:9px; background:#4d4d4f; height:33px; width:212px; line-height:32px;
color:#fff;}
section.wrapper .product.mr {margin:0 0 20px 0;}
Но на сайте показывается немного криво. Где ошибка по CSS? Почему идет верхний отступ по блокам продуктов.
Принтскрин.
Ссылка на сайт http://twoeyes.kz/