Александр Варлаков

#wrapper{
min-height: 100vh; // сделаем обертку минимум с высоту экрана
display: flex;
flex-direction:column;
}

.downbar{
flex-grow: 1; // сделаем downbar жадным - он заберет все свободное пространство и прижмет футер к низу
}

Код будет работать если вы уберете absolute у футера

Код не совсем понятный, хотя правильней сказать совсем не понятный:

footer {
position: absolute;
width: 60px;
height: 1px;
bottom: -1px;
right: 0;
}

"Абсолютный" футер высотой 1px и шириной 60px ? Серьезно? Зачем?

Чушь написал в предыдущем ответе (уже удалил)....

header__contacts - надо добавить flex-shrink: 0
P.S.
Удобно, но рано:
https://caniuse.com/flexbox-gap

Блоку со статьей position: relative;
Иконке:
posiiton: absolute;
left: 0;
top: 0; - разместит в левом верхнем углу

Чтобы иконка на половину выходила за блок (это для примера), добавь:
tranform: translate(0, -50%);

Секция "whyWe"

whyWe-wrap__item - flex: 0 0 506px;

flex-basis = 506px; - вот от сюда и полоса

Вот так можно:


Поле email теряет фокус - записываем его значение в hidden

Вместо, checked используй псевдокласс :focus Только кнопку "крестик" - надо сделать другим элементом, чтобы фокус терялся, думаю сам справишься

https://qna.habr.com/q/692844

Сейчас написал временный код с media запросами, с интервалами по 100px, но думаю что есть и лучшее решение, вопрос открыт

Что Конкретно не понятно?
Как делаются медиа-запросы, вот ссылка:
https://basicweb.ru/css/css_pr_media.php

Пример:



Для лучшего понимания - вот материал:
https://html5book.ru/css-background/

z-index header должен быть больше z-index других div,
например:

header {
z-index: 999;
}

Вот материал, для лучшего понимания:
https://basicweb.ru/css/css_position_elements.php