Header Confusion

[aquatowers]

I have a project that needs to revised the header of my website. Here is the current header, it shows here: Current Header

And it supposed to be like this, it shows here: Supposed to be the header

Here is my css code:
#container {
background: url(../images/bg0.png) center top repeat-x;
width: 960px;
margin-left: auto;
margin-right: auto;
}

heres my html code:
<div id="container">
<header>
<nav>
<ul id="nav">
<li><a href="index.html" class="current">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="reviews.html">Reviews</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<hgroup class="intro">
<h1 class="title"><img src="images/top_header.png" height="150"></h1>
<!--<h3 class="tagline">Pick it.. Box it.. Eat it..</h3>-->
</hgroup>
<div class="reservations"><br />
<span class="reservations-title">Call Us:</span>
<hr class="hr-solid" />
+973 77 30 40 50
<hr class="hr-dashed" />
<div style="margin-top:15px"> <a class="button" href="#" title="Email Us">We Deliver! </a> </div>
</div>

What should i do to make this right. Please help.

[aquatowers]

You can also view the code here at codepen: INVALID LINK *

• MOD EDIT

[Sedana]

That pen looks nothing like the code you posted.
It seems you just need to trade places and put the nav after instead of first.

[Author]

Posts