Básico

[jomaruro]

Hola:

He repasado tu código y aparte de quitar el width del body del html porque no es necesario si usas css, he modificado un poquito tu hoja de estilos y ahora debes compararlos. Lógicamente, debes adaptarlo a tu gusto.

Este es el modificado:

Código CSS:

* {
    margin:0 auto;
    padding:0;
}
 
body{
    width:909px;
}
.contenedor{
    width:100%;
    border:1px solid #0000ff;
}
 
.cabecera{
    position:absolute;
    width:100%;
    height:13%;
}
.menu{
    width:100%;
    display: block;
    overflow: hidden;
    width:100%;
    height:10%;
}
 
#fondoRojoMenu{
    display:block;
    overflow:hidden;
    margin:100px 0px 0px 0px;
    background:#E4062C;
}
 
#menuHorizontal {
    float:right;
    padding: 0px 0px 0px 0px;
}
 
#menuHorizontal li {
    display: inline;
    padding-bottom:30px;
}
#menuHorizontal li a {
    font-family: Arial;
    font-size:20px;
    text-decoration: none;
    float:left;
    padding: 10px;
    background-color: #E4062C;
    color: #fff;
}
 
#menuHorizontal li a:hover {
    background-color: black;
    margin-top:-2px;
    padding-bottom:12px;
}
 
.contenido{
    position:absolute;
    top:25%;
    width:100%;
    height:100%;
}
 

Unos pequeños apuntes:

1.- El body es una etiqueta html no una clase ni un id y en tu hoja css lo tienes definido con un punto no es necesario ponerle el punto.
2.- Para entender la primera etiqueta que he puesto en el css (el *) busca información sobre reset css, es muy útil utilizarlo.
3.- He aumentado a 909px el ancho de la página, sinó el menú no cabe en su contenedor y se descoloca, otra opción sería dejarlo en 900 y reducir un poco el tamaño de las fuentes del menú.
4.- En #menuHorizontal tienes un padding de 180px, cómo no sé que función tiene lo he puesto a cero. Tu verás si te vale así.

Saludos.