title: CSS/HTML fixed nav bar overlapping content
body: <p>I have made a nav bar that sticks to the top of the page, but it is sticking to some of the content and I have tried using <code>margin-top: 100px;</code> in the CSS file but that just moves the nav bar down 100px. Anyone have any ideas?
  <a href="https://jsfiddle.net/midwackcan/wnd503w8/3/" rel="nofollow">Link to js fiddle</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.con {
      overflow: hidden;
      background: #159B00;
      width: 1000px;
      height: 376px;
      border-radius: 10px;
      border: 2px solid black;
      box-shadow: 0 4px 8px black;
  }
  .nav {
    padding-top: 0px;
    background: #fff;
    height: auto;
    width: 100%;
    z-index: 150;
    top: o;
    position: fixed;
    box-shadow: 0 2px 3px rgba(0,0,0,.4);
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>        &lt;div class="nav"&gt;
              &lt;div id="nav_wraper"&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;a href="RUN ME.html"&gt;
                          &lt;/div&gt; 
                          &lt;/a&gt;&lt;/li&gt;       
                          &lt;/a&gt;
                          &lt;/li&gt;&lt;li&gt;
                          &lt;a href="index.html"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;&lt;li&gt;
                          &lt;a href="#"&gt;Designs&amp;#x25BC;&lt;/a&gt;
                              &lt;ul&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;&lt;li&gt;
                          &lt;a href="#"&gt;About&amp;#x25BC;&lt;/a&gt;
                              &lt;ul&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;&lt;li&gt;
                          &lt;a href="#"&gt;Contact&amp;#x25BC;&lt;/a&gt;
                              &lt;ul&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
          &lt;/div&gt;
          &lt;main&gt;
              &lt;div id="iG" class="con" &gt;
                  &lt;img src="slider.png" alt="" /&gt;
                  &lt;img src="step_1.png" alt="" /&gt;
                  &lt;img src="step_2.png" alt="" /&gt;
                  &lt;img src="step_3.png" alt="" /&gt;
                  &lt;img src="slider.png" alt="" /&gt;
              &lt;/div&gt;
          &lt;/main&gt;
  </code></pre>
  
  <p>Thanks.</p>