position layout center

This is my layout [url]http://www.omganime.info[/url] you notice the layout isn’t horizontal centered. How can I fix this?

[CODE]@charset “utf-8”;
/* CSS Document */

body {
margin-top: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#wrapper {
margin-right: auto;
margin-left: auto;
width: 1000px;
background-color: #FFFFC9;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FF0000;
border-bottom-color: #FF0000;
border-left-color: #FF0000;
float: left;
}

#top {
background-image: url(images/top.jpg);
height: 57px;
width: 1000px;
}

#header {
background-image: url(images/header.jpg);
height: 210px;
width: 1000px;
}

#bar {
background-image: url(images/bar.jpg);
background-repeat: repeat-x;
height: 30px;
width: 1000px;

}

#banner {
height: 100px;
width: 980px;
border: 1px dotted #FF0000;
margin: 10px;
background-color: #FFFFFF;
}

#content {
border: 1px dotted #FF0000;
height: 300px;
width: 550px;
background-color: #FFFFFF;
float: left;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

#sidebar {
height: 300px;
width: 410px;
border: 1px dotted #FF0000;
background-color: #FFFFFF;
float: right;
margin-right: 10px;
margin-bottom: 10px;
}

#left {
height: 300px;
width: 200px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FF0000;
float: left;

}

#right {
height: 300px;
width: 200px;
background-color: #666666;
float: right;

}

#footer {
background-color: #FF0000;
height: 30px;
width: 1000px;
float: left;

}
[/CODE]

Also in #CSS _↴