3
respostas

alinhamento menu

Não consigo deixar alinhado o menu "HOME PRODUTOS CONTATO".

Nas páginas de "produtos" e "contato" ficam bem próximos. Já na "Home" dá tudo errado, mesmo copiando.

http://127.0.0.1:3000/c%3A/DEVPPCC/ProjetosDevPPCC/BARBEARIA/BarbeariaAlura.html

header { background: url("metal.jpg"); padding: 20px 0;}

.caixa { position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right: 0; }

nav a { text-decoration: none; text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px;}

nav a:hover { color: #C78C19; text-decoration: underline; }

nav a:active { color: #3CB371; text-decoration: underline; }

.botao:hover { cursor: pointer; }

#banner{ width: 100%; margin-top: 0%; }

.principal { background: #CCCCCC; padding: 20px; border: 5px solid #000000; }

.titulo-principal { padding-left: 50px; text-align: center; margin: 0 0 0 30px; padding: 0 20px;}

#titulo-centralizado { text-align: center; font-weight: bold;}

h2 { font-size: 24px; height: 15px; margin: 40px;}

p { text-align: center; font-size: 20px;}

#missao { font-size: 20px; margin: 20px;}

em strong { color:#be6e23; }

h3 { font-size: 24px; height: 5px; margin: 40px;}

.itens{ font-style: italic; padding: 30px 20%; text-align: center; }

.beneficios{ background: #c2c2c2; padding: 10px 10px; text-align: center;}

ul { display: inline-block; width: 40%; margin-right: auto; vertical-align: top;}

.imgBeneficios{ width: 20%; box-sizing: border-box; border: 2px transparent; border-radius: 500px;}

li { font-size: 20px; text-align: justify;}

footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }

.copyright { color: #FFFFFF; font-size: 13px; margin: 20px 0 0; }

3 respostas

pode mandar o HTML do header?

Ih, sobrescrevi. Acho que agora foi, mas acabou que não descobri o que era. Vou mandar o que tenho.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Contato - Barbearia Alura</title>

        <link rel="stylesheet" href="reset.css">
     <link rel="stylesheet" href="style.css">
     <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap" rel="stylesheet">  
    </head>
    <body>
        <header>
        <div class="caixa">           
            <h1><img src="logo.png" alt="Logo da Barbearia Alura" href="C:\Users\prisc\Área de Trabalho\BARBEARIA\logo.png"></h1>

            <nav>
                <ul>
                    <li><a href="BarbeariaAlura.html">Home</a></li>
                    <li><a href="produtos.html">Produtos</a></li>
                    <li><a href="contato.html">Contato</a></li>
                 </ul>                
            </nav>
        </div>        
        </header>
[...]
    </body>
</html>

Descobri.

Estava usando ul e li para alinhamento de Benefícios, mas esqueci de especificar .beneficios, aí foi pra tudo.