margenes

[manisero_15]

Es la primera vez que uso las etiquetas div y tengo algunos problemillas.
Mi problema es que no consigue que el margen de la derecha se mantenga como el de la izquierda y quede la pagina web en el centro. Al no estas bien aliniado el cuadrado negro su aumentas el zoom se descoloca a la parte de abajo.
Si alguno tiene alguna idea o me puede echar una mano se lo agradeceria mucho.
La pagina web es la siguiente:
http://paginafootball.16mb.com/

y el codigo css este.

html
{ height: 100%;}

*
*
{ margin: 0;
padding: 0;}

body
{ font: normal .80em arial, sans-serif;
width:80%; margin:auto;
background-repeat:repeat-x;
}

ul#menu
{
margin: 0;}

ul#menu li
{ padding: 0 0 0 0px;
list-style: none;
margin: 2px 0 0 0;
display: inline;
background: transparent;}

ul#menu li a
{ font-size: 130%;
letter-spacing: 1px;
height: 35px;
padding: 15px 20px 0 20px;
text-align: center;
color: #FFF;
text-decoration: none;
background: transparent;}

ul#menu li.current
{ margin: 2px 0 0 0;}

ul#menu li.current a
{ text-decoration: underline;}

ul#menu li a:hover
{ text-decoration: underline;}

#menubar
{
width: 960px;
height: 45px;
background-image: url(../images/bar.jpg) ;
background-repeat:repeat-x;
padding-top: 25px;
text-align: center;
margin-right: auto;
margin-left:5%;
}

#central
{
top:100px;
width: 960px;
height: 330px;
padding-top: 25px;
text-align: center;
margin-right: auto;
margin-left:5%;
background-color: #CC0000;
background-repeat:repeat-x;
}

#lateral
{

width:250px;
height: 500px;
padding-top: 25px;
float:left;
margin-left:5%;
background-color:#0033FF;

}
#contenido
{

width:700px;
height: 500px;
padding-top: 25px;
float:left;
margin-left:10px;
margin-right: auto;
background-color: #000000;

}


Gracias.