I learnt html and css recently and there's something I don't understand how to remove the blank space on the bottom of my website : http://puu.sh/kSu7r/2fd0ed9532.png
And I have a bar http://puu.sh/kSudx/2d6c69a679.png that I would like to be fixed (stays even if I scroll down) but since the code of it involves position:relative it doesnt work ..
Here's the code:
.bar {
padding:0px;
background-color:#333333;
height:60px;
top: -10px;
width:100%;
text-align:center;
}
.bar ul {
position:relative;
transform: translateY(-50%);
top: 50%;
}
.bar li {
display:inline;
color:white;
font-style:Verdana;
text-align:center;
font-size:2em;
font-family:'Raleway';
margin:10px;
padding:10px;
}
.bar a {
text-decoration:none;
color:white;
}
<div class="bar">
<ul>
<li class="btn"><a href="#bottom">Element1</a></li>
<li class="btn"><a href="#bottom">Element2</a></li>
<li class="btn"><a href="#bottom">Element3</a></li>
<li class="btn"><a href="#bottom">Element4</a></li>
</ul>
</div>
Thank you very much.