This Ul li you run out of space between the two Li. Any way to solve it?
HTML code
CSS Code
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Canciones</a></li>
</ul>
</nav>
nav{
line-height: 90px;
font-size: 20px;
float:right;
margin-right: 30%;
}
nav ul li{
display:inline;
border:1px solid;
}
nav ul li a{
text-decoration: none;
color:black;
}
When you use display:inline or display_inline-block a margin is always generated between the elements
This behavior of the items with the inline-block value of leaving a gap between each of them is a consequence of the part they have of an item in line.
You can solve it in the following way:
nav ul li{
display:inline;
border:1px solid;
margin-left: -4px;
}
nav ul li:first-child{
margin-left:0;
}
I leave you this link with a very clear explanation and other ways to solve that problem.
I hope you serve, greetings!