Estoy intentando hacer una barra de navegación superior para una web y la cosa es que no consigo que este completamente pegada arriba y entre las opciones hay huecos clicables que están vacíos y me gustaría quitarlos. Alguien puede darme alguna pista o explicarme un poco como hacerlo? He buscado en internet y no consigo hacerlo con la información que me dan.
He aquí el código:
body{
background:#3CF;
}
.contenedor {
width: 95%;
max-width:1200px;
margin-left:0px;
margin-rigth:0px;
}
.contenedor p {
margin-bottom:40px;
}
header nav {
background:#3498db;
margin-bottom:10px;
}
header nav ul {
list-style: none;
overflow: hidden;
}
header nav ul li {
float: left;
}
header nav ul li a {
padding:40px;
color:#fff;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
text-decoration: none;
}
header nav ul li a:hover {
background:#2980b9;
}
<header>
<div class ="contenedor">
<nav class = "menu">
<ul>
<li><a title="Home" href="YustaHome.html"> Home </li>
<li><a title="Tattos" href="https://www.google.es/"> Tattos</li>
<li><a title="Drawings" href=""> Drawings </li>
<li><a title="About" href=""> About </li>
</ul>
</nav>
</div>
</header>