Едет верстка на сайте. при добавление в базу товара?

У вас второй элемент по высоте на 1 пиксель больше остальных. Отсюда и проблема. Дайте всем блокам фиксированный размер в 212px на 297px.

.single-product{
    width: 212px;
    height:297px;
}

из-за того, что у некоторых айтемов высота 298px, а у других 297px.

.single-product {
   max-height: 297px;
}

Блоки по высоте разные, если хотите использовать флоаты, то нужно убирать обтекание у элемента который переходит на новую строку ( на моем экране это каждый 6 элемент). То есть вы должны сделать каждому 6 элементу
clear: both;
Ну и дальше по @media пройтись, если на меньшем разрешении уже помещается 4 элемента, то у каждого 6 ставим
clear: none;
а каждому 5 ставим
clear: both;
и т.д.
Или же если нужно чтобы блоки были одинаковые, то задай им фиксированную высоту, как написали люди выше.