HTML I'm gonna CSS it!!!

You're newsletter in the code is placed outside the header.
Change this

Code:

<div id="header"></div> <div id="newsletter">
                        <input type="text" value="enter your email..." class="newsletter"/><input type="submit" value="OK" class="newsletter-submit"/>
                    </div>

To this:

Code:

<div id="header">
  <div id="newsletter">
   <input type="text" value="enter your email..." class="newsletter"/>
   <input type="submit" value="OK" class="newsletter-submit"/>
  </div>
</div>

 

You placed your newsletter GUI in the header and you're using a liquid design for your header on top of that.
You can solve this problem in two ways:
Don't use a liquid design meaning don't use this in you're CSS:

Code:

#header {width: 100%;}

But something like:

Code:

#header {width: 960px;}

or you can cut out the newsletter box in your image editor and place it:

Code:

#newsletter {background-image:url('newsletter.jpg')} 

It's ok to use a liquid design or place GUI elements in one big image, but doing both is not. Note however that this is technically possible but it is far from practical in your case.