Ao importar o cabeçalho da página produtos para página inicial, como desafio de conclusão do curso deixado pelo professor, não estou conseguindo manter os links de navegação do cabeçalho em inline, eles estão um em baixo do outro como si estivesse em bloco, não sei oq fazer, agradeço de mais quem poder me ajudar!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1 class="titulo-principal">Barbearia Alura</h1>
<h2 class="tituloLogo"><img src="imagens/logo.png" alt="logo.png"></h2>
<nav>
<ul class="navegacao">
<li class="line"><a href="index.hml">Home</a></li>
<li class="line"><a href="produtos.html">Produtos</a></li>
<li class="line"><a href="contato.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<img id="banner" src="imagens/banner.jpg" alt="Barbearia">
<div class="divPrincipal">
<h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
<p class="paragrafo-centralizado">Localizada no coração da cidade a <strong>Barbearia Alura</strong> 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 class="paragrafo-centralizado" id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes".</strong></em></p>
<p class="paragrafo-centralizado">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>
<div class="beneficios">
<h3 class="titulo-centralizado">Beneficios</h3>
<ul>
<li class="itens">Atendimento aos clientes
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
<img class="imagemBeneficios" src="imagens/beneficios.jpg" alt="">
</div>
</main>
<footer>
<img src="imagens/logo-branco.png" alt="">
<p class="copyright"> © copyright Barbearia Alura - 2022</p>
</footer>
</body>
</html>@charset "UTF-8";
header {
background-color: #bbbbbb;
padding: 20px 0;
margin-bottom: 5px;
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 100px;
right: 0;
}
nav li {
display: inline-block;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 22px;
color: #000000;
}
nav a:hover {
text-decoration: underline;
color: #c78c19;
}
#banner {
width: 100%;
}
.divPrincipal {
background: #cccccc;
padding: 30px;
}
.imgButton {
padding: 0px 0px 10px 10px;
width: 40px;
}
.titulo-principal {
padding-left: 30px;
}
.titulo-centralizado {
text-align: center;
}
.paragrafo-centralizado{
text-align: center;
}
#missao {
font-size: 20px;
}
em strong {
color: #FF0000;
}
.itens {
font-style: italic;
}
.beneficios {
background: #ffffff;
padding: 20px;
}
ul {
display: inline-block;
vertical-align: top;
width: 20%;
margin-right: 15%;
}
.imagemBeneficios {
width: 50%;
}
footer {
text-align: center;
background: url('imagens/bg.jpg');
padding: 40px 0px;
}
.copyright {
color: #ffffff;
margin: 20px 0 0;
font-size: 13px;
}
