Originally Posted by NicolaHWS
The margin is that big to make absolutely sure no matter how high a resolution someone's screen is the background goes all the way across, I did try reducing it right down to see if it made a difference and it didn't
Not sure what that means since your background is just a color. Since you don't specify a color, it's whatever I've set my browser with on my end.
It looks like you mean for #nav and #wrapper to be beside each other. That's normally done by floating one or both of those elements. Look at a simplified example of a 2-column layout here
. It's very easy to adapt that to a full width page like yours.
The three things I highlighted in my previous post, the huge margins (both -/+) and the width of the ul are what are causing your problem. That and not understanding how floats solve your problem (like floating 100% width elements).
Have a look at a float tutorial here
Another problem, you generically apply margin: 0 auto; to almost all your div elements. Auto margins is a centering technique and putting it on full width elements like the body of your document or an element that is supposed to go beside another like your #wrapper doesn't make sense.