I would personally move your logo outside the menu. Instead of
<div id="header">
<div id="menu">
<h1> <img src="images/logo.png"> </h1>
I would do this
<div id="header">
<h1> <img src="images/logo.png"> </h1>
<div id="menu">
That's just personal preference. Next like @Simplify mentioned then you would want to make these elements float left and right like so:
<div id="header">
<h1>Name of Site<img class="left" src="images/logo.png" alt="" /></h1>
<div id="menu">
You will notice that I put the class left, an alt and closing tag in the image "/" as well. It wouldn't hurt to check your code from time to time with http://validator.w3.org/
Finally you want to add this to your css file.
.left {
float: left;
}
#menu {
width: 100%;
padding: 0;
margin: 0;
}
#menu-wrap {
margin: 0 auto;
width: 1200px; /* You will need to change this */
float: right;
}
#header h1 {
text-indent: -9999px;
}
#header h1 img {
border: none;
}
The text indent will make the h1 text disappear while keeping good seo. Ignore the grey text. Not sure why its doing that :)
Also, I notice you have a set width for your menu as 1200px. I am sure you are wanting the entire width of the page to be this size. In this case you will need to adjust that for your logo to fit in the same line. For example. If your logo is 200px wide you will want to lessen the width of the menu to reflect that including any margin or padding your add. This will allow the logo and menu float side by side. Simply put, you don't want both of these elements to be wider than its main container of 1200px or it will not float side by side.
You will also need to create a class that clears the floating elements. I like to use .breaker
.breaker { clear: both; }
Add
<div class="breaker"></div>
after your closing menu tag.