【CSS】グローバルメニューの右寄せについて
HTMLCSS初心者で、最近勉強を始めました。
めちゃくちゃ初歩的な質問で恐縮なのですが、調べても納得がいかなかったので質問させてください。
やりたいこと
ヘッダー部分に画像とメニューが並列に表示されるものを作っていて、CSSで画像部分は左寄せ、グローバルメニューは右寄せにするコーディングをしたいです。
問題
グローバルメニューを右寄せにする際、
.headerにjustify-content: space-between;の記述をすると右寄せができるのですが、なぜそれでうまくいくのか理解できずにいます。
HTML
<body>
<header class="header">
<h1 class="sitename"><a href="#"><img src="img/1.jpg" alt="sitename"></a></h1>
<nav>
<div class="menu">
<ul>
<li><a href="#">はじめに</a></li>
<li><a href="#">会社について</a></li>
<li><a href="#">ニュース</a></li>
<li><a href="#">採用情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div>
</nav>
</header>
CSS
li {
list-style: none;
}
/*header*/
.sitename img {
height: 50px;
width: 200px;
padding: 0 30px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.header ul {
display: flex;
margin: 20px;
}
.header li {
margin: 10px;
}
justify-content: right;
justify-content: end;
justify-content: flex-end;
だとうまくいかず不思議に思っています。
どうしてそうなるのかの理由や、他に適切な記述方法があれば教えていただきたいです。
また、その他不自然な記述があればご指摘いただけますと嬉しいです。
よろしくお願いいたします。
1
（同じ階層中にある画像くんも一緒に移動します！）