title: navigation bar background color
body: <p>How can I make the background-color of my header covers 100% while keeping my navbar content 70%. In my code below the background color is limited to the width of my navbar which is 70%</p>
  <p>HTML</p>
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          &lt;nav class=&quot;navbar&quot;&gt;
              &lt;div class=&quot;logo-box&quot;&gt;
                  &lt;a href=&quot;index.html&quot; class=&quot;logo&quot;&gt;MOVIES&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;search-box&quot;&gt;
                  &lt;form action=&quot;https://www.google.com/search&quot; method=&quot;get&quot;&gt;
                      &lt;input id=&quot;seach-bar&quot; name=&quot;q&quot; type=&quot;search&quot; placeholder=&quot;Search MOVIES&quot; autocomplete=&quot;off&quot;&gt;
                      &lt;button id=&quot;search-button&quot; type=&quot;submit&quot; class=&quot;search&quot;&gt;Search&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;nav-links&quot;&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;links&quot;&gt;Genres&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;links&quot;&gt;Celebs&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;links&quot;&gt;My List&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>body {
      background-color: black;
  }
  
  header {
      display: flex;
      justify-content: center;
  }
  
  .navbar, main {
      width: 70%;
      margin: 0 auto;
  }
  
  .navbar {
      position: fixed;
      background: #1a1c1b;
      padding: 5px 0;
  }
  </code></pre>