0.

// Применяет ко всем атрибутам "class" в которых есть строка "__container"

значения:
[class*="__container"]{
max-width: 1087px; (Оригинальный размер 1057px но т.к мы добавили "отступы
безопасности" по 15px слева и справа
то нужно прибавить 30px к значению)
margin: 0 auto;
padding: 0px 15px;
}
// Для кнопок применять значение display: inline-block

1. Понять какие шрифты использовал дизайнер и подумать про оптимизацию (Отбросить

шрифты которые мало использовались
что бы не нагружать проект).
2. Выставляем для всего проекта (body) шрифт по умолчанию (обычно это шрифт
параграфов и кнопок).
3. Выставляем для всего проекта размер шрифта по умолчанию.
4. Выставляем для всего проекта цвет шрифта по умолчанию.
5. Построение сетки в макете и определение расстояния между линией слева и справа.
6. [css] Построение разметки (ограничивающего контейнера)
7. По умолчанию
------------------------------------
.wrapper{
overflow: hidden; //Скрывает всё содержимое что велико в области
display: flex;
flex-direction: column; //Выстраивание элементов в колонну
min-height: 100%; //Растягивает по высоте на всю страницу
}
------------------------------------
8. Разделить сайт на 3 блока:
8.1 Header
8.2 Main
8.3 Footer
9. По умолчанию (Прижимает footer)
------------------------------------
.main{
flex: 1 1 auto;
}
------------------------------------
10. Размещение блоков в header
11. Задать высоту шапки
12. Применить для header:
// Блок надвисает в воздухе
------------------------------------
position: absolute;
width: 100%;
top: 0;
left: 0;
z-index: 50;
------------------------------------
13.Проставление breakpointov после вёрстки header