Nesting nav in header tag

Nesting nav in header tag

When I place my <nav> inside my <header> the element seems to wrap the
<p></p> above it. It should not but I can't see why? My html must be
getting rusty.
<header class="clearfix">
<h1 id="heading">Main Heading</h1>
<h2>Sub Heading</h2>
<p>Tagline - Lorem ipsum dolor sit amet. Dolore, corporis.</p>
<div id="home" class="landing">
</div><!--end #home-->
<nav class="clearfix main-nav">
<ul class="clearfix">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#video">Video</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
CSS
header{ text-align:right;}
header p{ float:right;}
.main-nav{ width: 100%; background-color: #d3eafc;}
.main-nav ul{ clear:both; list-style:none; padding:0; margin:10px 0;}
.main-nav ul li{ float:left; list-style:none; width:150px;
border-right: 1px solid #999;}
.main-nav a:link,
.main-nav a:visited{
display:block;
line-height:30px;
text-align:center;
color:#fff;
text-decoration:none;
}
http://jsfiddle.net/otherDewi/u2xNN/