flexコンテンツの幅 (ul要素) について

ご覧いただき誠にありがとうございます。

flexコンテナー内のul要素の設定方法について分からないことがあり質問いたします。

よくあるパターンですが、ヘッダーの左にロゴ、右にナビゲーションがあるページを作ろうとした際、下記の現象がおこっています。

ul要素の幅がその下のli要素5つの合計より小さく、liの要素が右側にはみ出る。

意図していたのは、li要素5つの幅合計 (含むmargin) とぴったりの幅になるul要素だったのですが、なぜそうならないのでしょうか？
また、現時点の幅は何を表しているのでしょうか？

大変初歩的な内容で恐縮ですが、どなたかご教示いただけると幸いです。
どうぞよろしくお願いいたします。

HTML
1<section class="Header">
2  <div class="Header__logo"></div>
3  <ul class="Header__nav">
4    <li class="Nav__list"><a href="" class="List__txt">Home</a></li>
5    <li class="Nav__list"><a href="" class="List__txt">About</a></li>
6    <li class="Nav__list"><a href="" class="List__txt">Solution</a></li>
7    <li class="Nav__list"><a href="" class="List__txt">Access</a></li>
8    <li class="Nav__list"><a href="" class="List__txt">Contact</a></li>
9  </ul>
10</section>

CSS
1ul {
2  margin: 0px;
3  padding: 0px;
4}
5
6.Header {
7  width: 100%;
8  padding: 0 2%;
9  display: flex;
10  justify-content: space-between;
11}
12
13.Header__logo {
14  width: 25%;
15  height: 10vh;
16}
17
18.Header__nav {
19  display: flex;
20  list-style-type: none;
21  padding-left: 0px;
22}
23
24.Nav__list{
25  margin-right: 8%;
26}
27
28.List__txt{
29  font-size: 1.5rem;
30  letter-spacing: 0.2rem;
31  line-height: 10vh;
32  color: #000;
33}
34
35.Nav__list:last-child {
36  margin-right: 0%;
37}

行動規範の内容に同意します

回答1件

ベストアンサー

これでやりたいこと出来てます？

CSS
1.Header {
2    width: 96%;
3    padding: 0 2%;
4    display: block;
5    justify-content: space-between;
6}
7
8.Header__logo {
9    width: 25%;
10    height: 10vh;
11    float: left;
12}