Añadir sombra a los lados en menu

[dilan_snoopy]

saludos compañeros

los que sucede es que estoy aplicando sombras a mi pagina web pero cuando quiero aplicar sombras a los lados del menu no las aplica y pues para ellos tengo el siguiente fragamento de codigo que lo incluyo en #menu nav

Código:

 box-shadow: -15px 0 10px 0 rgba(0, 0, 0, 0.2),15px 0 10px 0 rgba(0, 0, 0, 0.2);

y lo que hace es que me daña la estructura asi



y pues el menu se ve asi con la sombra arriba y abajo pero no a los lados pero eso sucede cuando incluyo el codigo en #menu nav ul
https://confis.azurewebsites.net

alguien me podria explicar porque pasa esto ?

[Rafael]

Es que no estás pensando en módulos y contenedores.

Probablemente deberías tener un contenedor donde esté Confis, el espacio en blanco, el gris (supongo que van fotos) y el menú, y a ese contenedor le das sombra. Cosas por el estilo.

[siddartha23]

Será por que al nav le pones un overflow:hidden????

[dilan_snoopy]

ya le quite el hidden por margin auto, pero igual le agrego el box-shadow a mi div contenedor y no lo agrega :s
y el div de contenido tambien lo puse como margin auto porque lo tenia con valores
este es mi css de los estilos generales

Código:

body{
    background-color:#e7e6e6;
    font-family:Helvetica,Arial;
}   

#wrapper{
width: 100%;
text-align: center;
margin-top: 10px;
}

#contenedor{  
width: 1000px;
margin: 0 auto;

} 

#header{
width:1000px;
background-color:#FFFFFF;
height: 150px;
margin-bottom: 10px;
margin: 0 auto;
box-shadow: 0 -8px 40px 5px rgba(0, 0, 0, 0.2);
}

#contenido{
margin: auto;
margin-top:1px;
width: 1000px;
background-color:#FFFFFF;
height: 400px;
box-shadow: -15px 10px 40px 0 rgba(0, 0, 0, 0.2),15px 10px 40px 0 rgba(0, 0, 0, 0.2);
}

y este es mi css del menu

Código:

#menu nav  {
    display: block;
    width: 1000px;
    margin: auto;
    
}

#menu nav ul {
    margin-top:1px;
    width:100%;
    padding: .0em;
    float: left;
    list-style: none;
    background: #fff;
}

#menu nav li {
    float:left;
}


#menu nav a {
    float:left;
    padding: .1em .8em;
    text-decoration: none;
    color: #555;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    font: bold 1.1em/1 'trebuchet MS', Arial, Helvetica;
    letter-spacing: 1px;
    border-width: 1px;
    border-style: solid;
    border-color: #fff #ccc #999 #eee;
    background: #c1c1c1;
    background: linear-gradient(#f5f5f5, #c1c1c1);  
 }

#menu nav a:hover, nav a:focus {
    outline: 0;
    color: #fff;
    text-shadow: 0 1px 0 rgba(0,0,0,.2);
    background: #ec3b3b;
   /*background: linear-gradient(#df7171, #000); */
 } 

#menu nav a:active {
    box-shadow: 0 0 2px 2px rgba(0,0,0,.3) inset;
}
 
#menu nav li:first-child a {
    border-left: 0;
  /*  border-radius: 4px 0 0 4px;  */       
}

#menu nav li:last-child a {
    border-right: 0;
    border-radius: 0 4px 4px 0;            
}

y pues la sombra queda pero no uniforme y se sale por encima del menu por ahora lo tengo si ella, pero como dice rafael la sombre deberia ir en el contenedor pero no la agrega a no ser que sea por que el wrapper contiene el div de contenedor ?
cualquier consejo para mejor el codigo sera bienvenido tambien gracias

[dilan_snoopy]

Me respondo a mi mismo pero que torpe la estructura esta bien asi como dice rafael peroooooooooooooooooooooooooooo la PTM lo veo y no lo creo estuve rato mirando y no cai en cuenta pues resulta que en index el div estaba contendor y el css lo tenia como contenedor y no lo habia notado por eso empece aplicar sombras a cada div por separado.

************************************************** ************************
otra pregunta

en el index cuando yo tengo por ejemplo el div de header embebe otros div como el menu, el contenido...etc significa que en el css los que se aplique en div del header efecta a los que el embebe ?

gracias