Help centring a layout correctly

Usually I constrain content within a page width of 980px or so.

But I'm just trying out a layout that has a gradient effect in the header that I would like to have a total width of 1200px so that the gradient effect kind of extends beyond everything else.

You can see what I mean here:

http://www.traveltradeonly.com/index_new_101.php

It all looks OK so long as the browser window is at least 1200px, but if its reduced beyond that, then it doesn't centre. Which presumably it should ideally do down to 980px which is the width of content constrained by the red and yellow borders.

The CSS looks like this:

body {
background-position:top;
background-image:url(../images/body_background.gif);
background-repeat:repeat-x;
background-color: #2C455F;
color: #2c2c2e;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
line-height: 14px;
margin: 0 auto;
padding: 0 0 0 0;
text-align: center;
}
#header {
margin: 0 auto 0 auto;
padding: 0px 0px 0px 0px;
width:1200px;
height:150px;
text-align:centre;
border-left:1px solid #999;
border-right:1px solid #999;
background-image:url(../images/header_background.png);
background-repeat:no-repeat;
}
#header #navigation {
margin: 0 auto 0 auto;
height: 28px;
padding: 122px 0px 0px 0px;
border-top:0px solid #FFF;
border-bottom:0px solid #FFF;
width:980px;
border:1px solid #900;
text-align:center;
}
#contentWrapper {
margin: 30px auto 0 auto;
clear:both;
text-align: left;
width: 1200px;
color:#FFF;
border-left:1px solid #4C5C66;
border-right:1px solid #4C5C66;
}
#contentWrapper #rightColumn {
margin: 0px 110px 0px 0px;
padding: 15px 15px 15px 15px;
border-right: solid 0px #FFF;
float: right;
width: 270px;
border:1px solid #990;
background-color:#182633;
}
#contentWrapper #content {
margin: 0px 420px 0px 110px;
padding: 15px 15px 15px 15px;
font-size:13px;
line-height:16px;
color:#FFF;
border:1px solid #990;
background-color:#182633;
}

Any suggestions for improving that CSS to produce the desire effect much appreciated.

Thanks.