[Solved] Why doesn't everything align?

My Header (div #logo) aligns left along with the footer (div #footer), but the body and everything else is in the center.

I've tried several things but evidently not the right thing. Thanks if anyone can help.

Here's the CSS code:

/*DATA*/

body {
margin: 0;
padding: 0;
background: #FBFDAA url(images/bgstone2.gif) repeat;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
float: none;
}

h1, h2 {
font-weight: normal;
font-family:Arial, Helvetica, sans-serif;
}

p, ol, ul {
margin-top: 0;
line-height: normal;
}

a {
color: #000000;
}

a:hover {
text-decoration: none;
color: #000000;
}

a img {
border: none;
}

img.left {
float: left;
margin: 0 15px 0 0;
}

img.right {
float: right;
margin: 0 0 0 15px;
}

/* Header */

#logo {
margin: 0 auto;
height: 108px;
width: 960px;
background-image: url(images/swarmraidersbg2.gif);
background-position: center center;
}

#logo h1, #logo p {
margin: 0 auto;
font-weight: bold;
}

#logo h1 {
}

#logo p {
padding-left: 1px;
line-height: normal;
font-size: .85em;
}

/* Footer */

#footer {
clear: both;
padding: 20px 0;
width: 960px;
text-align: center;
font-size: smaller;
background-color: #FFFFFF;
background-image: url(images/hiero2.gif);
background-repeat: repeat-x;
background-position: top;
}