Why does position: fixed; not work with justify-content: space-between;?

Question

I want to create a basic Navbar, which stays always on top of the page, even when you scroll. In Addition, the Navbar should be as wide as the width of the screen it is displayed on.

My current attempt is this:

CSS:

#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    background-color:white;
}


#nav-list li {
    list-style: none;
    display: inline-block;
}

#header-img {
    width: 20vw;
}

HTML:

<header id="header">
    <img id="header-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png" alt="Logo">
    <nav id="navbar">
        <ul id="nav-list">
            <li><a class="nav-link" href="#function">Function</a></li>
            <li><a class="nav-link" href="#terms">Terms</a></li>
            <li><a class="nav-link" href="#privacy">Privacy</a></li>
        </ul>
    </nav>
</header>

My attempt comes to this result:

However, as you can see, the navbar does not fill up the whole screen. The three links should be pushed to the side.

I am new to HTML/CSS and the only possible fix I currently know, would be:

width: 100%;

But I am pretty sure I should not do it like that. Thanks for you answers! :)

Answer 1

Adding this will give it full width of the page and make it fit within the page.

#header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  background-color: white;
  width: 100%;
  margin: 0 auto;
  top: 0;
  left: 0;
  }