centering a page that is wider than the screen…help…

Hey,

Im having a bit of an issue with a website im building for a band.

The band want a site that is 2500 width so that when the page loads you can either scroll roght or left to view the out of screen material…

i cant find a way of the page loading centered…it is always loading to the far left and all i can do is scroll right…i have uploaded the site to [URL=”http://www.testingserver.comuv.com”]http://www.testingserver.comuv.com[/URL]

the CSS looks as follows:

#header { float: right;
height: 275px;
width: 800px;
background-image: url(Images/header.png);
background-repeat: no-repeat;
}
#vocals {
background-image: url(Images/vocals%20BG.png);
height: auto;
width: 2500px;
overflow: auto;
left: 0%;
}
#maincontentindex { height: auto;
width: 100%;
background-image: url(Images/main%20bg.png);
background-repeat: repeat-y;
}
#navbarbg { background-repeat: no-repeat;
}
body {
background-image: url(Images/large%20bg.png);
background-repeat: repeat;
}
#container {
}
.style1 { color: #CCCCCC;
font-size: 16px;
font-weight: bold;
}
.style2 {color: #FFFFFF}
.style4 { color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
#biography { height: auto;
width: 390px;
text-align: justify;
color: #FCFBFD;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #999;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
#wrapper {
padding: 5px;
height: auto;
width: 800px;
background-image: url(Images/Wrapper%20BG%201px.png);
background-repeat: repeat;
margin-right: auto;
margin-left: auto;
}
#cd { padding: 5px;
height: auto;
width: 390px;
}
#cddescription { padding: 5px;
height: 140px;
width: 225px;
float: right;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
}
#copyright { font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#track {
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-bottom-style: solid;
border-top-color: #999999;
border-right-color: #999999;
border-bottom-color: #999999;
border-left-color: #999999;
}
#galleryhome { padding: 5px;
height: 259px;
width: 390px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #999999;
}
#gigs { padding: 5px;
height: auto;
width: 790px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #999999;
}
.style5 {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
–>
</style>
</head>

Any help with this would be really appreciated as i cant find any other threads on this specific issue.

thanks very much.

Also in #CSS _↴