Quando eu passo o mouse ele só muda a cor do link quando eu passo o mouse exatamente por cima do link não sei como arrumar isso Tambem tive dificuldades para colocar o nome do footer no meio tentei com o "vertical-align: middle;" mas não deu certo estilos .css
/*Geral*/
html{
font-family: 'Open Sans', sans-serif;
}
h1{
font-size: 2rem;
}
h2{
font-size: 2rem;
}
p{
font-size: 1rem;
}
/*navegacao*/
.navegacao{
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem;
}
.navegacao .icones ul{
display: flex;
align-items: center;
}
.navegacao .icones ul li{
padding: 0 1rem;
transition: 1s;
color: blueviolet;
}
.navegacao .icones ul li a{
color: blueviolet;
text-decoration: none;
}
.navegacao .icones ul li a:hover{
color: white;
}
.navegacao .icones ul li:hover{
background-color: blueviolet ;
padding: 2rem;
color: white;
}
.cabecario img{
width: 100%;
overflow: hidden;
margin: 0;
}
/*Sobre*/
section .container-sobre{
display: flex;
}
.sobre{
background-color: darkgray;
padding:1rem ;
height: 20ch;
}
.sobre p {
margin-top: 1rem;
padding: 1rem;
text-align: justify;;
}
/*beneficios*/
.beneficios{
padding: 1rem;
}
.container-beneficios{
display: flex;
justify-content: space-around;
align-items: center;
}
.container-beneficios img{
width: 500px;
}
footer{
color: floralwhite;
background-color: black;
margin: 0;
height: 3rem;
text-align: center;
vertical-align: middle;
}
footer a{
color: blanchedalmond;
text-decoration: none;
padding: 1rem;
}
/*Dispositivos com resolução abaixo de 500px*/
@media only screen and (max-width: 500px) {
.navegacao {
flex-direction: column;
text-align: center;
margin: 0;
}
.navegacao .icones {
background-color: thistle;
width: 100%;
}
.navegacao .icones ul li{
margin-top: 1rem;
}
.navegacao .icones ul{
flex-direction: column;
}
}Index.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="estilos.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
<title>Barbearia alura</title>
</head>
<body>
<main class="container">
<header class="cabecario">
<nav class="navegacao">
<div class="logo">
<h1>Barbearia Alura</h1>
</div>
<div class="icones">
<ul>
<li><a href="#">Sobre</a></li>
<li><a href="#">Itens</a></li>
<li><a href="#">Mais</a></li>
</ul>
</div>
</nav>
<img src="img/principal.jpg">
</header>
<section class="sobre">
<h2>Sobre a Barbearia Alura</h2>
<div class="container container-sobre">
<p>Localizada no coração da cidade a Barbearia Alura traz para o mercado o que há de melhor para o seu
cabelo e barba. Fundada em 2019, a Barbearia Alura já é destaque na cidade e conquista novos
clientes a
cada dia.
</p>
<p> Nossa missão é: <em><strong> "Proporcionar auto-estima e qualidade de vida aos
clientes".</strong></em>
Oferecemos profissionais experientes e antenados às mudanças no mundo da moda. O atendimento possui
padrão de excelência e agilidade, garantindo qualidade e satisfação dos nossos clientes.
</p>
</div>
</section>
<section class="beneficios">
<h2>Beneficios</h2>
<div class="container container-beneficios">
<div class="itens">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<img src="img/mulher.jpg"
</div>
</section>
<footer>
<a href="#">www.alurabarbearia.com</a>
</footer>
</main>
</body>
</html>