I have a header which I have attached that I made in Photoshop

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.

<div id="header_top") <-- different background image/colour so I made new 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 id=social>
  <div id=twitter_icon_here> </div>
  <div id=facebook_icon_here> </div>
  <div id=google_icon_here> </div>

<nav> <-- main navigation bar in blue - should I wrap this in a div? -->

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.