要素を検証から見るレイアウト数値の読み方と組み方を教えてください。

※画像一部間違えて貼り付けていたので修正しました。

こちらProgateの実践コースの内容です。
「要素を検証を見ながらサイトを再現してみましょう！」との内容で、現在はヘッダーを作ろう！というステップです。

【見本】

【要素を検証の内容】

HTML
1<header>
2      <div class="container">
3        <div class="header-title">
4          <a class="header-logo" href="#home" target="_blank">Progate School</a>
5        </div>
6        <div class="header-menu">
7          <ul class="header-menu-right">
8            <li>
9              <a href="#languages" target="_blank">学習言語</a>
10            </li>
11            <li>
12              <a href="#features" target="_blank">特徴</a>
13            </li>
14            <li>
15              <a href="#pricing" target="_blank">料金</a>
16            </li>
17            <li>
18              <a href="#columns" target="_blank">コラム</a>
19            </li>
20            <li>
21              <a href="#contact" target="_blank">お問い合わせ</a>
22            </li>
23          </ul>
24        </div>
25      </div>
26    </header>

headerのCSS
1header {
2    height: 50px;
3    position: fixed;
4    top: 0;
5    left: 0;
6    right: 0;
7    background-color: #fff;
8    line-height: 50px;
9    border-bottom: 1px solid #eee;
10    z-index: 10;
11}

container
1.container {
2    width: 1170px;
3    padding-right: 15px;
4    padding-left: 15px;
5    margin-right: auto;
6    margin-left: auto;
7}

header
1.header-title {
2    float: left;
3}
4```header-logo
5![イメージ説明](66850dc80d27c6a5f2cb779706d302b1.png)
6```header-logo
7.header-logo {
8    color: #777;
9    font-weight: 700;
10    font-size: 22px;
11    font-family: 'Dosis', sans-serif;