CSS/HTML fixed nav bar перекрывающий контент

Question

Я сделал навигационную панель, которая прикрепляется к верхней части страницы, но она прилипает к некоторому содержимому, и я попытался использовать margin-top: 100px; в файле CSS, но это просто перемещает nav bar down 100px. У кого-нибудь есть идеи? Link to js fiddle

CSS

.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); 
} 

HTML

 <div class="nav"> 
      <div id="nav_wraper"> 
       <ul> 
        <li><a href="RUN ME.html"> 
         </div> 
         </a></li>  
         </a> 
         </li><li> 
         <a href="index.html">Home</a> 
         </li><li> 
         <a href="#">Designs&#x25BC;</a> 
          <ul> 
          </ul> 
         </li><li> 
         <a href="#">About&#x25BC;</a> 
          <ul> 
          </ul> 
         </li><li> 
         <a href="#">Contact&#x25BC;</a> 
          <ul> 
          </ul> 
         </li> 
        </ul> 
       </div> 
     </div> 
     <main> 
      <div id="iG" class="con" > 
       <img src="slider.png" alt="" /> 
       <img src="step_1.png" alt="" /> 
       <img src="step_2.png" alt="" /> 
       <img src="step_3.png" alt="" /> 
       <img src="slider.png" alt="" /> 
      </div> 
     </main> 

Спасибо.

Answer 1

Вы можете это исправить, добавив

body{ 
padding-top:100px; 
} 

и у вас есть ошибка синтаксиса в

.nav{ 
top:o; 
} 

должен быть

.nav{ 
top:0; 
} 

updated fiddle