This is one of my sites and as you can see if you go onto it, the white page image isn't perfectly aligned with the header image. How do I move this because I can't use margin because I am already using 'margin: 0 auto;' in the same place? here is my code; The image in question is the one in the CSS in the 'div#pagewrap'
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
		<title>South west THT Young Leaders</title>
		<link rel="stylesheet" type="text/css" href="/layout.css" />
	</head>
    <body id="home">
        <div id="page-wrap">
        <ul id="nav">
        <li class="home"><a href="#">Home</a></li>
        <li class="forum"><a href="#">Forum</a></li>
        <li class="contact"><a href="#">Contact</a></li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean sem libero, dictum eu, porta ac, dapibus at, lacus. Cras facilisis. Praesent semper. Nam tristique scelerisque risus. Duis mollis viverra nunc. Sed lectus justo, blandit porta, mattis sit amet, venenatis at, quam. Quisque neque eros, ultrices quis, egestas id, suscipit in, nisl. Vivamus eget nisl. Phasellus vehicula erat at ipsum. Sed est. Aliquam euismod turpis.
Integer sem diam, tincidunt vitae, rhoncus id, ultricies id, eros. Nunc consectetuer. Morbi nulla. Nullam leo orci, porttitor eu, interdum vitae, malesuada id, libero. Donec mollis. In eget neque vitae ante malesuada convallis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse mi sapien, faucibus nec, commodo vitae, eleifend at, nulla. Ut aliquam, dolor sed euismod commodo, ligula risus luctus enim, blandit semper neque odio eu velit. Fusce neque purus, convallis sed, laoreet sed, suscipit ac, turpis. Quisque at nibh. Fusce nibh risus, ultricies in, ultrices et, suscipit at, massa. Cras varius libero in ante. Phasellus velit. Etiam tincidunt lacus et erat aliquam elementum. Aliquam congue tempor elit. Vivamus tincidunt iaculis libero. Nullam egestas molestie lacus. Quisque luctus. Nullam sapien purus, feugiat id, hendrerit eu, lacinia quis, risus. Sed tortor tortor, ornare non, pellentesque id, euismod.</p>
 
		</div> <!-- END page-wrap-->
    </body>
</html>
Code:
body
{
background:url('images/header.jpg') repeat-x top;
background-color: #ffffcc
}

div#page-wrap {
margin: 0 auto;
width: 920px;
background: url(images/page_bg.jpg) repeat-y;
}

ul#nav {
    height: 200px; width: 900px;
    background: url('/images/banner_ctr.gif') no-repeat;
    margin: -8px; 
    list-style: none;
    }
    ul#nav li {
    display: inline;
    }
        ul#nav li a {
        display: block;
        height: 98px;
        float: left;
        text-indent: -9999px;
        }
            ul#nav li.home a {
            width: 319px;
            background: url(/images/nav_home.jpg) bottom center no-repeat;
            margin: 150px -20px -6px -41px;
            }
            ul#nav li.forum a {
            width: 286px;
            background: url(/images/nav_forum.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 20px;
            }
            ul#nav li.contact a {
            width: 315px;
            background: url(/images/nav_contact.jpg) bottom center no-repeat;
            margin: 150px 0px 0px 0px;
                    }
                ul#nav li a:hover {
                   background-position: center center;
Thanks.