I am having a bit of a problem with my layout and am wondering if someone may have a solution. I am building a pretty simple layout, one centered column in the middle of the page. Every thing works find except when I am checking the page in a smaller resolution than what I work at (1600x1200) the column gets scrunched to the right hand side of the page.

This only happens when I insert a data table into the page.

Below is my css;

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url(../images/back.gif);
background-repeat: repeat-x;
background-color: #334059;
font-size: 1em;
margin: 0px;
}

#headtitle {
background-image: url(../images/barbg.gif);
font-size: 0.8em;
color: #40424E;
font-variant: small-caps;
text-align: center;
font-weight: bold;
padding: 6px 0px 18px 0px;
}

#outer {
width: 80%;
margin-left: auto;
margin-right: auto;
border-left: solid 1px #000;
border-right: solid 1px #000;
background-color: #e1e1e1;
color: #000;
}

#headimg {
background-image: url(../images/head.png);
background-repeat: no-repeat;
background-position: top center;
background-color: #e1e1e1;
height: 160px;
}

#navbar {
background-image: url(../images/navbg.gif);
padding: 18px 0px 6px 0px;
background-color: #e1e1e1;
text-align: center;
font-size: 0.8em;
border-bottom: solid 1px #737373;
}

#main {
margin-left: 5%;
margin-right: 5%;
}

#footer {
background-image: url(../images/barbg.gif);
padding: 6px 0px 18px 0px;
border-top: 1px solid #737373;
border-bottom: solid 1px #000;
text-align: center;
font-size: 0.7em;
background-color: #0F1826;
}

table {
border: solid 1px #737373;
text-align: center;
width: 90%;
font-size: 0.8em;
margin-left: auto;
margin-right: auto;
border-spacing: 0px;
border-collapse: collapse;
}

Thanks