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;
}
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.