I have this HTML code and this CSS code:
.burua{
padding: 0px;
margin: 0px;
width: 100%;
background-color:#000000;
height:65px;
}
#p1{
font-size: 350%;
text-align: center;
}
a:link{
text-decoration:none;
color: #000000;
}
a:visited{
color: #000000;
text-decoration:none;
}
#nombreEndi{
text-align: center;
margin:0 auto;
position: relative;
top: 50%;
color: #8B0000;
font-family: "TituloEndi";
font-size:40px;
}
.header{
height:100px; width:100%;
text-align:center;
}
.menu{
height: 40px;
width:100%;
margin-top: 0px;
text-align:center;
background-color: #191919;
background-image: -moz-linear-gradient(top, #191919, #000000);
background-image: -o-linear-gradient(top, #191919, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
background-image: -webkit-linear-gradient(#191919, #000000);
background-image: linear-gradient(top, #191919, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
border-top: 1px solid rgba(50, 50, 50, 0.3);
}
.wrapper{ height:2000px;
width:100%;
padding-top:20px
}
.menu-fixed {
position:fixed;
z-index:1000;
top:0;
width:100%;
box-shadow: 2px 2px 5px #999;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
display: inline-block;
font-size: 25px;
width: 100%;
}
body{
margin: 0;
background-image: url("../ARGAZKIAK/background.png");
background-attachment: fixed;
}
#menu li{
display: inline-block;
list-style: none;
}
.listaArriba{
color: #000000;
width: 150px;
}
#titulua{
background-color:#000;
text-align:center;
margin-left: 300px;
margin-top: 7px;
}
#signUp{
height:250px;
position:fixed;
width: 200px;
margin-left: 250px;
margin-top: 100px;
text-align: center;
color: white;
}
#logIn{
height:250px;
position:fixed;
width: 200px;
margin-left: 575px;
margin-top: 70px;
text-align: center;
color: white;
}
#help{
height:250px;
position:fixed;
width: 200px;
margin-left: 900px;
margin-top: 100px;
text-align: center;
color: white;
}
.argazkia{
margin-left:10px;
}
#azalpena{
font-size: 35px;
}
#behealdea{
margin-top:0px;
height: 30px;
background-color: #191919;
background-image: -moz-linear-gradient(top, #191919, #000000);
background-image: -o-linear-gradient(top, #191919, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #191919), color-stop(1, #000000));
background-image: -webkit-linear-gradient(#191919, #000000);
background-image: linear-gradient(top, #191919, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#191919', endColorStr='#000000');
border-top: 1px solid rgba(50, 50, 50, 0.3);
width: 100%;
position: fixed;
bottom: 0;
text-align: center;
}
<header class="burua">
<div class = "cabecera">
<p id="p1">DiruBank</p>
</div>
</header>
<div class="menu" id="menu">
<nav class="top-menu">
<ul class = "navigation">
<li class="listaArriba" id="news"><a href="#">NEWS</a></li>
<li class="listaArriba" id="conciertos"><a href="#">GIGS</a></li>
<li class="listaArriba" id="videos"><a href="#">VIDEOS</a></li>
<li class="listaArriba" id="songs"><a href="#">MUSIC</a> </li>
<li class="listaArriba" id="lyrics"><a href="#">LYRICS</a></li>
<li class="listaArriba" id="store"><a href="#">STORE</a></li>
</ul>
</nav>
</div>
<div id="signUp">
<img class="argazkia" id="arg1" src="../ARGAZKIAK/signUp.png"/>
<p id="azalpena">Sign up</p>
</div>
<div id="logIn">
<img class="argazkia" id="arg2" src="../ARGAZKIAK/login.png"/>
<p id="azalpena">Log In</p>
</div>
<div id="help">
<img class="argazkia" id="arg3" src="../ARGAZKIAK/help.png"/>
<p id="azalpena">Help</p>
</div>
<footer id="behealdea">
<a href="#"> Egileak </a>
</footer>
What I do not understand is that it generates the gray chunk from the top.
Greetings.