Почему криво встают товары?
Потому что карточки товара все сверстаны через float. И, если их высота разная, что видно на картинке, то они выбивают те, что лежат под ними. Так работают float'ы. Используйте inline-block, flexbox, или укажите всем блокам одинаковую высоту. А лучше ограничивайте высоту заголовка и описания товара используя фиксированную высоту + overflow: hidden. А так же, к последнему пункту можно добавить это свойство 
На SCSS будет так:@mixin justifyBlocks {
    text-align: justify;
    font-size: 0;
    line-height: 0;
    
    &:after {
        content: '';
        display: inline-block;
        width: 100%;
    }
}
А для всех потомков первого уровня так:> div {
  display: inline-block;
  vertical-align: top;
}
Я думаю, что понятно описал решение. Спрашивайте если что. =)
P.S. А чтобы выровнять по левому краю, то text-align: left, :after - удаляете, а для потомков ширину в %. Можно и в случае с justify задать ширину дочернего блока в %.