Olá, estou tentando realizar a tarefa de importar o menu de navegação da página Produtos para a página Home. Meu menu de navegação insiste em ficar em cima do banner e em não alinhar (problema com o display: inline). Utilizando este código no html:
<header>
<div class="caixa">
<h1 class="titulo-principal">Barbearia Alura</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contato</a></li>
</ul>
</nav>
</div>
</header>E, este no CSS:
body {
}
.caixa {
position: relative;
width: 940px;
margin: 0 auto;
}
.titulo-principal {
padding-left: 20px
}
nav {
position: absolute;
top: 110px;
right: 0;
}
nav li {
display: inline;
margin: 0 0 0 15px;
}
nav a {
text-transform: uppercase;
color: #000000;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: #C78C19;
text-decoration: underline;
}O resultado fica este: https://imgur.com/FJGzba1 Agradeço a atenção.
