<ul> <li> centered, not moving down.. unsure why / how to fix - html

Question

The <nav> should be aligned to the left, below the logo and slogan. However, despite attempting to do so with both margin and padding it remains above the logo and centered on the page. Any help with how to rectify this is greatly appreciated.
HTML
<header>
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
CSS
/* Header */
header {
margin-top: 95px;
}
#logo {
float: left;
}
#slogan {
float: right;
margin-top: 90px;
}
nav ul li {
display: inline;
float: left;
}
nav ul li a {
padding-right: 20px;
}
nav ul li:last-child {
padding-right: 0;
}

Answer 1

To your CSS add:
nav {
clear:both;
}
jsFiddle example

Answer 2

First off what I always do is to give all elements default widths and hights.
The nav is an inline element and not a block.
to refrain from using clear fixes you should put a div element around the logo and the slogan.
like this:
HTML
<header>
<div id="header_top">
<div id="logo">
<img src="img/logo.png" alt="GEC logo" />
</div>
<div id="slogan">
<h1>Revolutionizing Potential</h1>
</div>
</div>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Coaching Services</li>
<li>Resources</li>
<li>Events</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
Now you can just give the header_top div a display block and a overlfow:hidden.
That will give make the header_top div grow with its content.
Now giv you nav a display:block style and it is done
I tested it local on my notebook and it worked like a charm :)
add:
CSS
#header_top{
display: block;
overflow: hidden;
}
nav{
display: block;
}