I have a header which I have attached that I made in Photoshop
.headerh.png


I decided to try HTML5 and have some questions.

Is it possible to use 2 nav tags for in the header?

My first nav tag has a different background image than the rest of the header.


Code:
<header>
<div id="header_top") <-- different background image/colour so I made new div -->
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Privacy</li>
<li>Contact</li>
</ul>
</nav>
</div>


<div id="logo"> <-- Title and tag, maybe I'll add in a picture logo at a later date -->
<h1> Title Here </h1>
<p> Your #1 Resource Guide </p>
</div>

<div id=social>
  <div id=twitter_icon_here> </div>
  <div id=facebook_icon_here> </div>
  <div id=google_icon_here> </div>
</div>


<nav> <-- main navigation bar in blue - should I wrap this in a div? -->
<ul>
<li>Besellers</li>
<li>Brand</li>
<li>Type</li>
<li>Articles</li>
</ul>
<nav>


</header>
I am guessing this looks very messy.

I have a few questions:

1. Because the first Nav tag has a different background color, should I place it in its own div, or can I just give the nav tag its own class and width 100% and style the background?

2. I want to position the logo div exactly where I want, so a div is essential for this right or is there a new tag that I can do this with in HTML5?

3. For the main navigation with the blue background, again should I make a new div for this or just style the nav tag if thats possible?

I've tried looking online and on google but still having a bit of difficulty, usually I wrap everything in their own divs but html 5 seems to make it a bit cleaner.