title: How to separate navigation from header
body: <p>Well ! I wrote a code for header with light blue background color width of 100% and height of 450px below the nav tag. I have also closed the nav tag. </p>
  
  <p>Ideally the blue background header width of 100% and height of 450px should appear below the navigation and logo in result but the header still taking the navigation inside it? Why is that ?<a href="https://jsfiddle.net/mustaqimahmed/xwxyaphc/embedded/result/" rel="nofollow">See full code here</a> I want to pull the light background down and separate the above nav elements.</p>
  
  <pre><code>&lt;div id="brand"&gt;Mustaqim Ahmed &lt;/div&gt;
  &lt;nav&gt;
  &lt;ul&gt;
    &lt;li&gt; &lt;a href="#"&gt; Portfolio &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt; Resume &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt; Behance &lt;/a&gt;&lt;/li&gt;
    &lt;li&gt; &lt;a href="#"&gt; Contact &lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section id="header"&gt;
  
  &lt;div id="header"&gt;
  &lt;/div&gt;
  #brand
  {font-family: Roboto;
   font-size: 30px;
   font-weight: bold;
   line-height: 50px;
   color: #999;
   float: left;
   margin-left: 10px;}
  
  
  
  
  }
  #header{
  
  background: lightblue;
  width: 100%;
  height: 350px;
  
  
  
  }
  
  nav { text-align: center; line-height: 50px;  
  
  }
  
  nav ul { float: right;
  
  }
  
  nav li {display: inline; list-style: none;
  
  }
  
  nav a {text-decoration: none; font-family: Helvetica; padding: 10px
  
  }
  
  nav a:hover {
  
   }
  </code></pre>