title: move div down below fixed header
body: <p>i have searched about and can't seem to find the answer I am looking for.</p>
  
  <p>I want to know how to move my div down below my fixed header. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url(http://fonts.googleapis.com/css?family=Oswald);
  body {
      width: 100%;
      margin: auto;
  }
  
  .container {
      width: 75%;
      margin: 0 auto;
  }
  
  .header {
      background: #6396bc;
      width: 100%;
      top: 0;
      position: fixed;
  }
  
  .logo {
      float: left;
      font-family: "Oswald", sans-serif;
      font-size: 15px;
      margin-left: 15%
  }
  
  a {
      text-decoration: none;
      color: white;
  }
  
  li {
      list-style: none;
      float: left;
      margin-left: 15px;
      padding-top: 15px;
      font-family: "Oswald", sans-serif
  }
  
  .nav {
      float: right;
      margin-right: 15%
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;team Zeus | Home&lt;/title&gt;
          &lt;link rel="stylesheet" href="../stylesheets/styles.css"&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
          &lt;div class="header"&gt;
              &lt;div class="container"&gt;
                  &lt;div class="logo"&gt;
                      &lt;h1&gt;&lt;a href="#"&gt;team Zeus&lt;/a&gt;&lt;/h1&gt;
                  &lt;/div&gt;
                  
              &lt;div class="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="#"&gt;Page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Another page&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;1 other page&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;div class="container"&gt;
          
          &lt;div class="content"&gt;
              &lt;p&gt;I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)&lt;/p&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I think it is something to do with the containers, because when I try and resize them with width, it just messes the full page around. I cannot figure it out</p>
  
  <p>Thanks</p>