justify-content: space-between;の右端に余白ができる

Question

前提・実現したいこと

justify-content: space-betweenをかけたのに、右端に余白ができてしまいます。余白を消すにはどうすればいいでしょうか？

該当のソースコード

<header>
      <div class="container">
        <div id="header">
      <h2 id="header-logo"><a href="#">My Work</a></h2>
      <nav id="header-nav">
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Work</a></li>
          <li><a href="#">News</a></li>
          <li><a href="#">Contact</a></li>
          <li><a href="#"><i class="fa-solid fa-camera"></i></a></li>
        </ul>
      </nav>
      <div class="button">
      <button id="header-button"></button>
      <i class="fa-solid fa-xmark" id="cross-button"></i>
    </div>
    </div>
    </div>
    </header>

header {
  padding: 100px 0;
}

#header-logo {
  font-weight: normal;
}

#header-logo a {
  color: black;
  text-decoration: none;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#header-nav li {
  display: inline-block;
  padding-right: 25px;
}

#header-nav a {
  text-decoration: none;
  color: black;
}

#header-nav a:hover {
  opacity: 0.7;
}

button {
  display: none;
}

.fa-xmark {
  display: none;
}

試したこと

同様の問題が記載されているサイトに以下の可能性が記載されていましたが解決には至りませんでした。

• marginがかかっている
• justifty-content: space-around;と間違っている
• content: "";が追加されている

補足情報（FW/ツールのバージョンなど）

dynabook V72/JLE
型番:PV82JLECNRDQE

Answer 1

空であってもそこに要素があるから表示されています。

.button {
  display: none;
}

Comments

[amagiri]

display: none;でも要素は残っていることになるんですね。完全にないものとして考えていました。<nav>の前に<button>を配置したら解決しました。ありがとうございました！