In css, when I extend the top margin of my main content, my fixed top nav section margin drops along with the main content
<p>I'm designing an extremely simple static blog page with HTML5, SASS &amp; CSS.</p>

<p>Although I've used the 'nav' semantic (for a fixed bar at the top of the page so that it remains no matter how low on the page you scroll) and the 'header' semantic (for more of a title above the articles and below the 'nav') to keep them separate, when I extend 'header' top margin, the 'nav' drops at the same increment. Why? And how to I get the nav to stay put, fixed at the top?</p>

<p>Essentially, my object is to get the 'header' out from under the 'nav', so if there is a better way, I'm all ears.</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>body {
    height: 2000px;
    font-family: helvetica;
} 

nav {
    background: #FFE599;
    height: 30px;
    width: 100%;
    position: fixed;
    border-bottom: 2px solid black;
}

nav p {
    margin: 7px auto;
    margin-left: 10px;
}

header {
    background: #B6D7A8;
    border: 2px solid black;
    border-radius: 10px;
    text-align: center;
    height: 50px;
    width: 760px;
    margin: 50px 10px 20px 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
  &lt;p&gt;The Lorem Micro Blog&lt;/p&gt;
&lt;/nav&gt;
&lt;main class="blog-width"&gt;
  &lt;aside id="left-side"&gt;
    &lt;h2&gt;Check out my vertically centered ad!&lt;/h2&gt;
    &lt;img src="href" alt="" /&gt;
  &lt;/aside&gt;
  &lt;div class="content"&gt;
    &lt;header&gt;
      &lt;h1&gt;The Lorem Micro Blog&lt;/h1&gt;
      &lt;p&gt;By Foo Bar&lt;/p&gt;
    &lt;/header&gt;
  &lt;/div&gt;
&lt;/main&gt;</code></pre>
</div>
</div>
</p>