Займёмся шапкой. Сейчас мы зададим цвет фона, а в следующей части тренажёра добавим фоновое изображение. Фоновый цвет шапки сделаем тёмным по двум причинам:

• во-первых, фоновое изображение в шапке достаточно тёмное,
• во-вторых, текст в шапке белого цвета, а фон должен быть контрастным.

Зачем вообще задавать фоновый цвет блоку, в котором есть фоновое изображение? Представьте, что эта картинка не загрузилась или грузится очень долго. В этом случае светлый текст будет легко читаться на контрастном тёмном фоне.

Навигационное меню мы разметили с помощью списка, а у списков по умолчанию есть отступы и маркеры. Сейчас мы сбросим маркеры и сделаем так, чтобы текст внутри списка был набран прописными символами.

Важно! Мы сбрасываем стили по умолчанию не для всех списков на странице, а только для списка меню, и используем для этого селектор по классу — .main-nav.

Сбрасывать стили по умолчанию для текстовых элементов (списков, заголовков, абзацев и так далее) с помощью глобальных селекторов по тегам — очень плохая практика. Вот плохой пример, никогда его не повторяйте:

h1, p, ul {    /*  Это может показаться удобным,         */
  margin: 0;   /*  но такие стили «сломают» весь текст,  */
  padding: 0;  /*  который размечен «обычными» тегами.   */
}              /*  Не делайте так!                       */