Display:flexを使いたい場合は、横並びにしたい要素のブロック要素大きな塊の要素名に対してdisplay:flexを使う
Ulは一つの塊なので、ulは一つでその中にliでリストを作成していく
間違って
<ul>
<li> </li>
</ul>
<ul>
</li> </li>
</ul>
みたいな感じで作成してしまった。
正解は
<ul>
<li> </li>
</li> </li>
</ul>
Ulは１個のリストにつき１つでいい。
画像の上にヘッダーを乗せる場合はmargin 0 autoが効かないので、postionプロパティを使って場所を整えていく
headerの親要素はbodyなので、position:relativeは使わなくてよくて、position:absoluteを使っている