El color del cuerpo aparece sobre el encabezado

Estoy intentando diseñar google play como diseño de página web (versión móvil). Estoy usando CUSTOM GRID SYSTEM (12 col 0.5% de margen). El problema es que el color del cuerpo aparece sobre la sección del encabezado (creo que sí, tal vez sea un problema diferente). Quiero que se vea / se mueva así: imagen de ejemplo de google play mobile

Aquí está el código:

**

Es posible que necesite ampliar el zoom al 250% o al ancho máximo del paisaje: 640 px para ver el diseño.

**

body { margin: 0px; padding: 0px; font-family: Roboto; background: #eeeeee; } html { margin: 0px; padding: 0px; } h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } .top { height: auto; margin: auto; font-family: Roboto Light; } .nav { height: 40px; width: 100%; position: fixed; background: #4caf50; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); } .nav a:link, .nav a:visited { font-size: 20px; width: auto; padding: 5px; margin: 5px; text-decoration: none; color: white; text-align: center; } .nav a:hover, .nav a:active { background-color: #388e38; } .header { background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed; height: 70%; width: 100%; } a { text-decoration: none; } .container { margin: 5%; background: white; } .personal_icon { margin: 5%; } 
    Test          

Quieres algo como esto. En su código, está arreglando bg-image of header, por lo tanto, el cuerpo se desplazará sobre esa imagen, por lo que debe corregir el encabezado en lugar de corregir bg-image

 body { margin: 0px; padding: 0px; font-family: Roboto; background: #eeeeee; padding-top:70vh; } html { margin: 0px; padding: 0px; } h1 { font-size: 5.9vw; } h2 { font-size: 3.0vh; } p { font-size: 2vmin; } .top { height: auto; margin: auto; font-family: Roboto Light; } .nav { height: 40px; width: 100%; position: fixed; background: #4caf50; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.5); top:0; } .nav a:link, .nav a:visited { font-size: 20px; width: auto; padding: 5px; margin: 5px; text-decoration: none; color: white; text-align: center; } .nav a:hover, .nav a:active { background-color: #388e38; } .header {background: url(https://amazingslider.com/wp-content/uploads/2012/12/dandelion.jpg) center center fixed; height: 70vh; width: 100%; position:fixed; top:40px; z-index:-1; } a { text-decoration: none; } .container { margin: 5%; background: white; } .personal_icon { margin: 5%; } 
    Test          

Después de jugar un poco, creo que hay un problema con el encabezado. Funciona si le das position: fixed e z-index: -1 . El único problema restante es que debes asegurarte de que el espacio permanezca. Recomiendo un

Configurar z-index a 1 para su navegación debería ayudar.