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

Question

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

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

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

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

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

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

<section class="Header">
  <div class="Header__logo"></div>
  <ul class="Header__nav">
    <li class="Nav__list"><a href="" class="List__txt">Home</a></li>
    <li class="Nav__list"><a href="" class="List__txt">About</a></li>
    <li class="Nav__list"><a href="" class="List__txt">Solution</a></li>
    <li class="Nav__list"><a href="" class="List__txt">Access</a></li>
    <li class="Nav__list"><a href="" class="List__txt">Contact</a></li>
  </ul>
</section>

ul {
  margin: 0px;
  padding: 0px;
}

.Header {
  width: 100%;
  padding: 0 2%;
  display: flex;
  justify-content: space-between;
}

.Header__logo {
  width: 25%;
  height: 10vh;
}

.Header__nav {
  display: flex;
  list-style-type: none;
  padding-left: 0px;
}

.Nav__list{
  margin-right: 8%;
}

.List__txt{
  font-size: 1.5rem;
  letter-spacing: 0.2rem;
  line-height: 10vh;
  color: #000;
}

.Nav__list:last-child {
  margin-right: 0%;
}

Answer 1

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

.Header {
    width: 96%;
    padding: 0 2%;
    display: block;
    justify-content: space-between;
}

.Header__logo {
    width: 25%;
    height: 10vh;
    float: left;
}