I'm encountering an issue with my <nav> element where adding the float:right property seems to introduce a 3px margin at the top. Interestingly, if I omit the float property, everything works perfectly.
Below is the code snippet:
<nav>
<ul>
<li ><a href="#">UBICACION</a></li>
<li><a href="#">RESERVAS</a></li>
<li class="boton_chico"><a href="#">FOTOS</a></li>
</ul>
</nav>
And here's the corresponding CSS snippet:
nav {
width:100%;
height:70px;
background-color:#000;
}
ul{ margin-top:0;}
ul li {
font-family:'Gotham-narrow-light-botonera';
list-style-type:none;
}
ul li a {
text-decoration:none;
color:#FFF;
width:190px;
height:10px;
font-size:2em;
text-align:center;
margin-top:0;
padding:0;
float:right;
margin-top:15px;
}
ul li.boton_chico a{
width:130px;
text-align:center;
}
body {
background:url(imagenes/subtle_carbon.png) repeat;
background-attachment:fixed;
background-color:#111;
margin:0; padding:0;
}
Any insights or solutions would be greatly appreciated. Thank you!