2
respostas

Solução do consolidando meu conhecimento

Decidi adiantar e tirei as bordas brancas(mas conhecida como margin) que estavam ficando por volta do header...

produtos.html

<!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>Produtos - Barbearia Alura</title>
    <!--Estilizadores da página-->
    <link rel="stylesheet" href="assets/css/produtos.css">
</head>

    <body>
        <header>
            <h1><img src="assets/img/logo.png" alt="Logomarca da 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>
        </header>

    </body>

</html>

produtos.css

body {
    margin: 0;
}

header {
    background: #635A58;
}

h1 {
    margin: 0;
}

nav li {
    display: inline;
    margin: 0 0 0 15px;
}

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

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
2 respostas

Eu não tinha ouvido falar do reset.css até agora, sempre resetava no css dessa mesma forma, inclusive mais prático... Porem entendi que o reset.css é para todos os navegadores, importante de usar nos projetos mais complexos.

Sim... Também nunca tinha ouvido falar do reset.css foi uma descoberta para mim, com certeza vai facilitar muito para projetos complexos, por isso de inicio fiz na mão mesmo que eu achava mais prático.