まず、サイトは分解して塊(かたまり・ブロック)で捉えるようにして頭の中を整理してから考えましょう！ 分解って？？以下のような手順で分解していきます
例えばヘッダーだとざっくり分解するとこんな感じです 外側から塊を考えていくと赤色→黄色→緑色というような塊に分けることができます 次にこれをhtmlで想定してみましょう！
赤枠：サイトのヘッダーになるのでheader 黄枠(左)：ロゴは画像で表示するからimg 黄枠(右)：メニューのリストになっていて、順番はどのような順番でもいいのでul 緑枠：リストの中のひとつひとつのアイテムなのでli というようにそれぞれの枠にタグを当てはめておきましょう！
ここでお気づきの方もいらっしゃるかもしれませんが、同じ色の枠は同じ階層になっています 階層は今後重要になってくるのでこの段階から意識しておきましょう！
ここまでできたら、次はcssを考えていきましょう！ まず黄色の階層の<img>と<ul>を横並びにしないといけないですね！ 横並びにしたいときはflex-boxがおすすめなのでflex-boxを使って実現していきましょう (まだflex-boxに不安がある方はこちらで練習してみてください！)
今回は<img>と<ul>を横並びにしたいので、この2つに共通する親要素に対してdisplay: flex;をしてあげると横に並んでくれるはずです ここで階層を理解していることが役に立ちます！ 親要素は一個上の階層のことになるので今回の場合は
<img>と<ul>の親要素は<header>になります。なので<header>に対してdisplay: flex; ただこれだけでは<img>と<ul>が真横にくっついてしまうので横の並び方を変えるjustify-content: space-between;等で調整してみてください！
これと同じように<li>も横並びにしていきましょう <li>を横並びにしたいので<li>の親要素にdisplay: flex;をする
ひとつ上の階層なので親は<ul>になりますね！
このように、今回は試しにheaderでコードを書く前に頭の中を整理する練習をしました！ このように塊で捉えて、階層を頭の中で想定して、先にhtmlをどのように作るべきかを考えてからコードを書いていくと思考が整理されてコーディングしやすくなりますので、いきなりキーボードを叩かず、手元の紙などに枠をいっぱい書いてみる作業を先にするようにしてみてください！
<header>に入るのは ・ロゴ ・TOP、PRODUCTなど この2つだけです！
画像がスライドショーになっているところ(メインビジュアル)は<header>に入らないのでそこだけ気をつけてください！
この注意点がよくわからない場合は気軽に質問してください！