title: How do i change the color of my navbar that has a fixed position?
body: <p>I've been trying to add "background-color" but that just leaves a big empty gap in between the header img and header nav due to the position.Without the position, the header nav wouldn't be where i want it to be (towards the right)<br>
  (I can't use any bootstrap or whatever because its not in my syllabus and im just starting out to code) </p>
  
  <p>This is my code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    margin-top: auto;
    height: 79px;
    overflow: hidden;
  }
  
  header img {
    float: left;
    position: fixed;
    z-index: 2;
    top: 0;
  }
  
  header nav {
    float: right;
    position: fixed;
    z-index: 2;
    top: 0;
    height: 79px;
    left: 542px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;a href="index.html"&gt;&lt;img src="images/greylogo.png" alt="E R I" /&gt;&lt;/a&gt;
    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt; &lt;a href=#&gt; Home &lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="aboutme.html"&gt; About Me &lt;/a&gt; &lt;/li&gt;
        &lt;li&gt; &lt;a href="events.html"&gt; Events &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a href="contact.html" target="_blank"&gt; Contact Me &lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>