Ankhena

Второй, конечно.
Вы ведь не хотите чтобы сайт прибился к левой стороне при ширине окна больше 1800

1. div внутри кнопки лишний
2. для скругленного треугольника используйте svg, не майтесь ерундой

Добавьте начальные значения transform

Проще всего это реализуется с помощью css columns.

Если блоки случайны, то грид без js вам не поможет.
https://medium.com/@andybarefoot/a-masonry-style-l...

Если можно задать высоту, то на флексах норм. Но в продакшене вряд ли.

В остальных случаях masonry, isotope и т.д.

https://jsfiddle.net/Ankhena/1omavg28/
альтернативы:
clip-path
border-image

Всё что вам нужно: https://jsfiddle.net/608fz5gc/

.payments input[type="radio"]:checked .payments
Сейчас вы сказали браузеру, что нужно найти payments, который лежит внутри чекбокса.
Внутри чекбокса сложно находится.

В CSS можно выбрать только блоки, которые лежат после элемента или внутри.

Родителя можно покрасить только на js.

Можно сделать костылик в виде доп.элемента, который в коде будет после инпута и примерять стили к нему. А задать ему абсолют так, чтобы казалось, что рамка покрасилась у родителя.

Например, так на чистом css https://jsfiddle.net/642j1vh5/

И это:

.payments input[type="radio"] {
  /* display: none; */
}

плохо, гуглите про доступное скрытие и паттерн visually-hidden.

https://jsfiddle.net/dnphj1vL/

Она и не перекрывает.
У вас item прозрачные и через них видно тень предыдущего блока.
Перестанут быть прозрачными - будет не видно.

https://jsfiddle.net/7szxL0ca/

Родителю

grid-template-columns: repeat(3, 1fr);
grid-gap: 5px

Первому элементу:
grid-column: 1/-1;
либо через span, как хотите.

https://jsfiddle.net/vasm5p1w/

Какие используете единицы измерения при верстке?

Подумайте сами, от чего у вас зависит размер блока?
От размера шрифта или от размера родителя?

Это будет и ответ на обе части вопроса: и "какие" и "почему"?

Еще в прошлом вашем вопросе писала, что с помощью псевдоэлементов.
Не понятно, почему нужно отказываться от clip-path.
https://jsfiddle.net/crg9qkpn/

Но и зачем он тут нужен, тоже не вполне ясно, можете svg сделать обычным фоном. Тогда и псевдо не нужны.

Я бы именно так и поступала.

Это из раздяда, "хотите фокус покажу?"
Уберите height: 100%; у .header, все будет хорошо.

Почему так происходит:
С шириной браузеру всё более или менее понятно.
А вот высота зависит от контента.
Вы дочернему элементу говорите "стань высотой в 100% родителя", а родителю говорите "растянись по высоте дочернего". Браузер не понимает что же ему делать и что от чего считать.
Т.е. высоту дочернего можно указать в %, если у родителя есть указанная в явном виде высота (не важно в каких единицах измерения).
Можно для html указать высоту в % и они будут считаться от высоты вьюпорта (а её браузер знает, она четкая и понятная) и дальше передавать ее дочерним.

С флексами все проще. Для них по умолчанию align-items stretch, т.е. элементы растягиваются вдоль поперечной оси (по вертикали если главная ось идет по горизонтали (row)).
Если перестать указывать флек-элементам высоту, то они растянутся на всю высоту строки. У вас строка одна, значит на всю высоту родителя для которого у вас указана минимальная высота.

p.s. не вполне понятно, какую задачу вы пытаетесь решить, поставив рядом header и main.
Вообще, думаю, что вам нужны гриды и вот это Footer не опускается вниз страницы. Появляется скролл. Как это исправить?

Там же редактор проще некуда, выделили и раскрасили.


Для Zero

Удобнее всего это решается гридами.
Примерно так: https://jsfiddle.net/mowb6dL3/

1. Флоатами сетку не делают уже очень давно.
2. Задавайте высоту только там где без неё не обойтись