Olá, Estou com uma dificuldade, estou tentando colocar o cabeçalho da pagina de produtos na pagina de home, estava indo tudo bem até que, percebi que as tegs de navegações quando iam para depois da metade da pagina simplesmente não ficavam mais em linha. Segue o codigo da parte do css:
header {
background: #CCCCCC;}
nav{
position: absolute;
top: 150px;
right: 0px;}
nav li{ display: inline-block; margin-left: 10px;
}
nav a{
font-size: 22px;
text-decoration: none;
font-weight: bold;
color: #000000}
#banner { width:100%; }
.principal{ background: #CCCCCC; padding: 30px; }
.titulo-principal { padding-left: 20px; }
.titulo-centralizado { text-align: center
}
p { 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%; }
código da parte do html:
<body>
<header>
<h1><img src="logo.png"></h1>
<nav>
<ul class="cabeca">
<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>
</header>
<img id="banner" src="banner.jpg">
<div class="principal">
<h2 class="titulo-centralizado">Sobre a Barbearia Alura</h2>
<p>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 id="missao"><em>Nossa missão é: <strong>"Proporcionar auto-estima e qualidade de vida aos clientes"</strong>.</em></p>
<p>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">Benefícios</h3>
<ul>
<li class="itens">Atendimento aos Clientes</li>
<li class="itens">Espaço diferenciado</li>
<li class="itens">Localização</li>
<li class="itens">Profissionais Qualificados</li>
</ul>
<img src="beneficios.jpg" class="imagembeneficios">
</div>
</body>