Como deixar o espaçamento menor entre os links do menu?
to montando um site codigo do index é esse , index.php:
<html>
<head>
<link href="css/test.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVIÇOS</a></li>
<li><a href="#">LOGIN</a></li>
<li><a href="#">PRODUTOS</a></li>
<li><a href="#">FALE CONOSCO</a></li>
</ul>
</nav>
<header>
<div class="conteudo">
<h1>Agiltec</h1>
</div>
</header>
<footer>
<div id="footer-texto"><p>Copyright 2019 - AGILTEC</p></div>
</footer>
</body>
</html>o código css é esse, test.css:
body {
margin:0;
padding:0;
}
/*MENU*/
nav {
display: flex;
flex-direction: column;
align-items: center;
margin-left:auto;
margin-right:auto;
width: 100%;
background: linear-gradient(0deg, rgba(193, 188, 188, 0.31) 0%,rgba(255, 255, 255, 0.27) 100%);
border-bottom: solid 2px #000;
}
nav > a {
text-decoration: none;
color: #f1f1f1;
font-weight: 700;
font-size: 28px;
font-family: Pacifico, serif;
}
nav ul{
list-style-type: none;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
display: flex;
font-size:13px;
padding: 0px;
flex-direction: column;
align-items: center;
}
nav ul li {
text-align: center;
width:100%;
}
nav ul li a {
text-decoration:none;
float:left;
width:100%;
color:#333;
display:inline-block;
line-height: 20px;
margin-left: -100px;
}
nav ul li a:hover {
color:#3a7773;
width: 100%;
}
/*END MENU**/
/*CONTEUDO*/
header{
background-size: cover;
background-position: center;
color: #f1f1f1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20%;
}
.conteudo{
margin-bottom: 50%;
}
.conteudo h1{
color: #000;
}
/*END CONTEUDO*/
/*Footer*/
footer {
padding: 10px;
background: #f2f2f2;
}
footer p{
text-align: center;
padding: 10px;
font-family:Cabin Condensed;
color:#000;
text-align:center;
margin-top:40px;
}
/*END FOOTER*/
@media screen and (min-width: 768px) {
/*
NAVEGAÇÃO
*/
nav {
flex-direction: row;
justify-content: space-around;
}
nav ul {
flex-direction: row;
width: 50%;
}
header {
height: 60vh;
justify-content: center;
}
}etão eu ja mexi nessas duas partes do código, primeira parte :
nav ul li {
text-align: center;
width:100%;
}segunda parte:
nav ul li a {
text-decoration:none;
float:left;
width:100%;
color:#333;
display:inline-block;
line-height: 20px;
margin-left: -100px;
}tentei usar padding e mexer no width, mas não consegui, queria diminuir o espaçamento entre os link pra ficar mais junto e proporcional sem danificar o menu. Me ajudem porfavor, Obrigado.
