CSS/HTML fixed nav bar overlapping content - html

Question

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 margin-top: 100px; in the CSS file but that just moves the nav bar down 100px. Anyone have any ideas?
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>
Home
</li><li>
Designs▼
<ul>
</ul>
</li><li>
About▼
<ul>
</ul>
</li><li>
Contact▼
<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>
Thanks.

Answer 1

You can fix this by adding
body{
padding-top:100px;
}
and you have syntax error in
.nav{
top:o;
}
should be
.nav{
top:0;
}
updated fiddle