Нужно обьяснение по ошибкам в коде?

Question

[ahillesius]

Вот макет, который необходимо сверстать


Код прилагаю
https://jsfiddle.net/dfrqk7oc/3/

1. Относительно карточек товаров.
В медиа-запросах указано, что если экран больше 1000px в ширину, карточки товаров располагаются в 3 колонки. Почему-то сейчас максимум 2. для такой ширины. Контейнер для карточек голубой для наглядности, что было понятно, где границы карточек. Так же интересует, как лучше верстать блок карточек, но без использования booststrap.

2. Не получается выровнять по вертикали блок "payment_img (inline-block)" - картинки оплаты внизу страницы. Использовал flex - не работает.

3. При изменении ширины экрана элементы, которые должны быть на всю ширину body (имею в виду header и footer) не отображаются, как нужно Хотя для них установлен width=100%) Почему так ? Непонятно. Прилагаю изображение, хотя в коде видно

Одним словом, много ошибок.
Прошу на них указать и подсказать как нужно и прокомментировать по порядку, чтобы было понятно, к чему это.

Comments

[Ankhena]

0. Проверяйте свой код валидатором https://validator.w3.org/nu/
Сюрпризов станет меньше.
В том числе и CSS.
Хорошие редакторы кода также сразу подсвечивают ошибки. Обращайте внимание на цвет и подчеркивания.

1. Учимся считать.
33% + 9px + 33% + 9px + 33% + 9% = ?
Влезет это в 100% при ширине родителя 1000px?
Нет, не влезет. А сколько влезет? Две.

Современные браузеры понимают column-gap для флексов. Можете использовать calc, чтобы влезло в 100%.
Либо просто space-between.

2. Обводите рамочками
Если не понятно почему что-то не выравнивается и вообще что происходит, обводите рамочками (border, outline (+ outline-offset), box-shadow).
Флекс там прекрасненько работает.
Вы задали его для payment_box. Но он по высоте ровно как иконки. Там просто нет свободного места для выравнивания. Какое бы вы ни задавали, результат будет одинаковым.
Зато родитель занимает высоту всей строки. Это значит, что нужно выравнивать payment_box внутри payment_img. Либо сначала растянуть payment_box на всю высоту.

А еще лучше убрать лишние обертки. Зачем вокруг картинок два div? Одного за глаза и за уши.
Можно поменять на список.

3. продолжаем считать и обводить.
Элементы не влезли, появилась горизонтальная полоса прокрутки.
Ширина header задана 100%. А у вас видимая часть вывалилась за эти 100%, потому что у внутреннего блока ширина 1003px (откуда она такая кривая взялась?). Но хедер закончился там, где закончились 100%.

[ahillesius]

1. Почему у вас 1000px - это ширина родителя ? Родитель для блока карточек должен быть 56.5% (должно быть 567px, но в диспетчере разработчика указано 561px. Почему так ?) от ширины контентной части (1003px). Учитывая фиксированные отступы 9px, ширина карточек должна быть 32.5% от ширины блока карточек.

3. Ширина header = 100%, что подразумевает от края до края ширины body (так как он родитель, и также имеет ширину 100%).

А у вас видимая часть вывалилась за эти 100%, потому что у внутреннего блока ширина 1003px (откуда она такая кривая взялась?). Но хедер закончился там, где закончились 100%.

"Но хедер закончился там, где закончились 100%" Что это значит ?
Что означает "видимая часть" ? И как задать в этом случаи ширину контентной части ?

Answer 1

[MrColdCoffee]

1. карточки товаров

.product-wrapper{
// убрать внешний отступ справа
margin-right: 9px;
}
.product{
// 100 чего?  тут нужно дописать %
width:100;
}

2. картинки оплаты

.payment_img {
    float: right;
    display: table;
    height: 100%;
}

.payment_box {
    display: table-cell;
    vertical-align: middle;
}

3. header,footer
пропиши для них display:table;

Comments

[ahillesius]

А как тогда создать фиксированный отступ между ними ?
.product-wrapper{
// убрать внешний отступ справа
margin-right: 9px;
}
.product{
// 100 чего? тут нужно дописать %
width:100;
}

[MrColdCoffee]

ahillesius,

.catalog {
    width: 56%;
    background-color: aqua;
    margin-top: 36px;
    margin-left: 26px;
    text-align: justify;
}

.product-wrapper {
    display: inline-block;
    background-color: blue;
    margin-bottom: 28px;
    height: 226px;
    vertical-align: top;
}

.product-wrapper{
width:49.5%;
}

@media only screen and (min-width: 1000px){
.product-wrapper {
    width: 32.5%;
}

}

как то так

[ahillesius]

MrColdCoffee, https://jsfiddle.net/urfno1e7/ Не работает даже, если развернуть вьюпорт на ширину экран. Размещается одной колонкой

[MrColdCoffee]

ahillesius, .catalog {display:table;}

[ahillesius]

MrColdCoffee,
Все ровно не работает как нужно