Background image too wide in IE

I'm hoping someone can tell me what I've done wrong on this site that I'm trying to post. It's a simple one-page site where while it displays perfectly in Firefox, IE extends the nav bar to about 30px beyond its div so the background image for the div beneath it looks shortened.

Here's the page so you can see what I mean: http://www.rttweb.com/hig. It hasn't gone live yet, but it needs to by morning and I can't for the life of me figure out what the problem is. I have tried messing with margins, padding, position: relative; position: absolute; an开发者_如何转开发ything and everything I could find and have used for troubleshooting before, but nothing.

I even tried using a 1px x 34px slice, but it refused to change. I'm at my wit's end and I just know it's something so completely simple that I'm missing. Any help and/or suggestions would be helpful and greatly appreciated!

The margin-left:20px; on ul class="nav" is causing the problem. Maybe change this to padding? (or 0)

you have a '' right at the top of your HTML and its showing the text 'margin-left:-20px' above the website in IE.

Also try using the strict DOCTYPE at the top of your HTML instead of transitional to get better cross browser compatibility.