What is wrong?(Wordpress(HTML/CSS)) - php

Question

I dont know what but my posts are colliding with the navigation bar like this:
http://i.imgur.com/y2qhEzH.png
Thanks if you can help:)
The navigation bar HTML/php
<div>
<nav class="site-nav">
<?php
$args = array(
'theme_location' => 'primary'
)
?>
<?php wp_nav_menu( $args); ?>
</nav> </div>
Post HTML/php
<div>
<?php
if(have_posts()):
while (have_posts()) : the_post(); ?>
<h2><a a href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></h2>
<?php the_content(); ?>
<?php endwhile;
else :
echo '<p>No content found</p>';
endif;
?> </div>
Css
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
Im just starting to learn wordpress, and I litterally cant get past this. HELP:)

Answer 1

Try adding this to your CSS:
.site-nav {
float: left;
}
Here's a Fiddle of what your setup might look like minus the PHP, and here's one with the fix.
Full Code
.site-nav ul {
margin: 0;
padding: 0;
}
.site-nav ul li {
list-style: none;
float: left;
}
.site-nav ul li a:link,
.site-nav ul li a:visited {
display: block;
padding: 10px 18px;
border-top: white 3px solid;
text-decoration: none;
}
/* Added this to simulate your window size */
.container {
width: 360px;
}
/* Fix */
.site-nav {
float: left
}
<div class="container">
<div>
<nav class="site-nav">
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>About us</li>
<li>Contact us</li>
<li>Logos</li>
<li>Websites</li>
</ul>
</nav>
</div>
<div>
<h2>Welcome</h2>
<p>Hey!</p>
<p>Welcome to our site.</p>
</div>
</div>

Answer 2

Just adding
float: left
to the parent element did not help.
But adding Clearfix hack helped:)