title: Why does position: fixed; not work with justify-content: space-between;?
body: <p>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.</p>
  <p>My current attempt is this:</p>
  <p>CSS:</p>
  <pre><code>#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;
  }
  </code></pre>
  <p>HTML:</p>
  <pre><code>&lt;header id=&quot;header&quot;&gt;
      &lt;img id=&quot;header-img&quot; src=&quot;https://cdn.freecodecamp.org/testable-projects-fcc/images/product-landing-page-logo.png&quot; alt=&quot;Logo&quot;&gt;
      &lt;nav id=&quot;navbar&quot;&gt;
          &lt;ul id=&quot;nav-list&quot;&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#function&quot;&gt;Function&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#terms&quot;&gt;Terms&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class=&quot;nav-link&quot; href=&quot;#privacy&quot;&gt;Privacy&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
  &lt;/header&gt;
  </code></pre>
  <p>My attempt comes to this result:</p>
  <p><a href="https://i.stack.imgur.com/iF8NE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iF8NE.png" alt="Result of my attempt. Does not take up the whole screen." /></a></p>
  <p>However, as you can see, the navbar does not fill up the whole screen. The three links should be pushed to the side.</p>
  <p>I am new to HTML/CSS and the only possible fix I currently know, would be:</p>
  <pre><code>width: 100%;
  </code></pre>
  <p>But I am pretty sure I should not do it like that. Thanks for you answers! :)</p>