ヘッダー部分をコーディングするためのヒント

ヘッダーの構成を考える

ヘッダー部分は最大横幅1140pxのdiv（前回作成したcontainerクラス）の中に、以下２つが入っている構成です。

• ロゴを中央に表示するdiv
• グローバルメニュー+電話番号を囲っているdiv

下のdivは更にグローバルメニュー+電話番号に分かれます。
配置する場所以下のようにデザインされているので、少し厄介です。

• グローバルメニュー：中央
• 電話番号：右端

この配置を実現させるために、中を3つのブロックに分けましょう。

flexレイアウトを使って横に並べます。
横並びにするには前回作った「row」クラスが使えそうですね。

htmlファイルでのブロック構成は下記のようになります。

<header class="container">
  <div></div>
  <div class="row">
    <div></div>
    <nav></nav>
    <div></div>
  </div>
</header>

それぞれ中身を入れ、クラスを作ってスタイルを設定してください。

スマホ幅向けに調整する

スマートフォン幅に合わせてレイアウトを変更するためには、空divを非表示にする必要があります。
フレックスコンテナ内の並び順を縦方向に変更する記述は、前回書いているのでOKですね。

li要素などにpaddingやmarginを設定していると、配置がズレることがあります。
メディアクエリ内で調整してください。