Работаем с отступами, шрифтом и фоновым цветом для шапки.

Давайте приступим к оформлению каркаса сайта шапки сайта, которую мы создали. И начнем мы с создания блока, в котором будут находиться стили оформления CSS. 

Внутри элемента head, создадим:

<style>
    .header {
    background-color:#209cee;
}
</style>

Этим кодом мы задаем фоновый цвет для шапки, чтобы границы шапки были более различимы. 

Но, пока наш блок не растянут на всю ширину страницы. Это происходит из-за того, что блок находится в двух родительских элементах: html и body.

Добавим слили, которые уберут внутренние и внешние отступы для этих элементов:

html, body {
    padding: 0;
    margin: 0;
}

Теперь давайте сделаем белым цветом элементы h1 и h2, которые находятся внутри шапки.

.header h1, .header h2 {
    color:#fff;
}

Теперь давайте поработаем над внутренними отступами содержимого внутри шапки.

.header-body {
    padding: 3rem 1.5rem;
}

Теперь шапка растянулась на всю доступную ширину и занимает все доступное пространство. 

Давайте еще к тексту в шапке применим какой-то красивый шрифт. 

Сделать это можно с помощью сайта Google Fonts.

https://fonts.google.com

Давайте для примера подключим шрифт Roboto. 

Выбираем настройки этого шрифта (см. видео). Переходим во вкладку Embed.

Копируем и вставляем в элемент head:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">

И добавляем сам шрифт к нужному элементу:

.header-body {
    padding: 3rem 1.5rem;
    font-family: 'Roboto', sans-serif;
}

Пока достаточно. Добейтесь такого же результата и будем двигаться дальше.