Hero-блок и кнопка

Теперь основное содержимое. На широком экране строки текста во всю ширину окна читать трудно, поэтому main становится колонкой посередине страницы. Как в итоговом проекте курса CSS, мы зададим ему max-width, максимальную ширину: на большом экране колонка будет шириной 960 пикселей, а на телефоне сожмётся по ширине экрана. margin: 0 auto ставит её посередине, а внутренний отступ 0 32px не даёт тексту прижиматься к краям узкого экрана.

Hero-блок должен привлекать внимание: много места сверху и снизу (padding: 64px 0), всё по центру и крупный заголовок. Правило для заголовка — .hero h1, поэтому оно оформляет только заголовок в hero-блоке. margin: 0 убирает внешние отступы заголовка, чтобы пространство вокруг него создавал только внутренний отступ hero-блока.

Теперь кнопка. Ссылка — строчный элемент, а такие элементы не больше своего текста. С display: inline-block ссылка остаётся в своей строке, но внутри превращается в блок, как настоящая кнопка (кнопки по умолчанию именно inline-block, вы видели это в уроке «Display и позиционирование»). Затем мы дадим ей внутренние отступы, скруглённые углы, янтарный фон (#f59e0b), тёмный жирный текст (#1e1b4b, цвет шапки) и уберём подчёркивание.