Getting entire to nav bar and logo to the center!

Aloha,

I'm sure I am missing something simple, but here it goes....
You can view my current cart at https://www.sheldongate.com/zencart.

Here is my stylesheet.css What am I missing for why my entire logo and nav bar are to the left? I need them in the center. Which style element controls the position of the entire logo and nav bar? It seems I have changed all to text-align: center;. Any help?

body {
margin: 0;
padding: 0;
font: normal 62.5%/1.3em Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #000000;
background: url(../images/bckgrdoverlay.png) #ccccff;
}
/* Glacial Age Template Layout*/
/BOF Main Wrapper - Wraps the contents of the layout/
#mainWrapper {
margin: 0 auto;
padding: 0;
background: #ccccff;
border: 1px solid #000;
text-align: center;
width: 90%;
vertical-align: top;
}
/EOF Main Wrapper/
/BOF Header layout/
#topWrapper {
margin: 0;
padding: 0;
text-align: center;
width: 0;
vertical-align: top;
}
#headerWrapper {
margin: 0;
padding: 0;
background: #ccccff;
text-align: center;
width:1000px;
}
#logoWrapper {
margin: 0;
padding: 0;
text-align: center;
height:180px;
background: /url(../images/bg.gif)/ #D7E0F8;
position:relative;
}
#logo {text-align: center;}

.date {
margin-right: 50px;
padding-top:2px;
padding-right: 5px;
float: right;
color: #000;
font-weight: bold;
text-align: right;
font-size: 1.2em;
line-height:normal;
}
#navMainSearch {
position: absolute;
top: 5px;
right:0;
}
#taglineWrapper {
/margin: 0;/
position: absolute;
top: 20px;
left: 250px;
width: 360px;
height:1%;
}
#tagline {
/padding-top:10px;/
color:#000;
font-size: 2em;
text-align : center;
vertical-align: middle;
line-height:normal;
}
/EOF Header layout/
/BOF top main navigation/
#navMainWrapper {
margin: 0;
background: url(../images/silver_bar.gif) repeat-x;
font-weight: bold;
text-align: center;
color: #ccccff;
height: 26px;
width: 100%;
}
#navMain {
margin: 0 0 0 40px;
padding: 3px 0 0 10px;
font-size: 1.1em;
list-style-type: none;
text-align: center;
color:#D4D4D4;
}

#navMain ul, #navMain li {
margin:0;
padding:0;
display:inline;
}
#navMain ul li a {
margin-right:2px;
padding:2px 10px;
background:#6A8FD9;
color:#fff;
border:1px solid;
float:left;
font-weight:Bold;
line-height:14px;
text-decoration:none;
border-color:#66006B;
}

#navMain ul li a:hover {
color:#000;
background:#D7E0F8;
}
#navAccountWrapper {
margin: 0 50px 0 0;
font-weight: bold;
color: #ccccff;
height: 26px;
}
#navAccount {
margin: 0;
padding: 0;
background: url(../images/account_bar.gif) no-repeat transparent;
height: 26px;
font-size: 1em;
width: 316px;
float: right;
}

Etc...etc..

Got it, I was using the wrong % for one of the elements..... Sorry everyone!