Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Posição completamente diferente.

Fiz usando a mesma metodologia, porém com imagens diferentes. Já tentei de tudo e não consigo entender o porque do meu 'main' não ficar centralizado.

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Produtos - SuperBarba</title>
    <link rel='stylesheet' href='reset.css'>
    <link rel='stylesheet' href='produtos_superbarba.css'>
</head>

<body>
    <header>
        <div class='caixacentralizadora'>
            <h1> <img src='logo.png'></h1>
            <nav>
                <ul>
                    <li><a href='home.html'>Home</a></li>
                    <li><a href='produtos_superbarba.html'>Produtos</a></li>
                    <li><a href='contato.html'>Contato</a></li>
                </ul>
        </div>
        </nav>
    </header>

    <main>
        <ul class='produtos'>
            <li>
                <h2>Cabelo</h2>
                <img src='cabelo.png'>
                <p class='descricao_produto'>Na tesoura ou máquina, como o cliente<br>preferir</p>
                <p class='produto_preco'>R$ 45,00</p>
            </li>
            <li>
                <h2>Barba</h2>
                <img src='barba.png'>
                <p class='descricao_produto'>Corte e desenho profissional de barba</p>
                <p class='produto_preco'>R$ 30,00</p>
            </li> 
            <li>
                <h2>Combo</h2>
                <img src='combo.png'>
                <p class='descricao_produto'>Pacote completo de cabelo e barba</p>
                <p class='produto_preco'>R$65,00</p> 
            </li>
        </ul>
    </main>


</body>

</html>
header{
    padding: 0% 0;
}

.caixacentralizadora {
    width: 1500px;
    position: relative;
    margin: 0 auto;
}

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

nav li {
    display: inline;
    margin-left: 20px ;
}

nav a {
    text-transform: uppercase;
    color: #cc0246;
    font-weight: bold;
    font-size: 26px;
    text-decoration: none;


}
.produtos{
    width: 1500px;
    margin: 0 auto;
}
.produtos li {
    display: inline-block;
    text-align: center;
    vertical-align: top;

}
.produtos h2{
    font-size: 30px;
    font-weight: bold;
    color: #017c8e ;
}

.produto_preco{
    font-size: 22px;
    font-weight: bold;
    color: #017c8e;
}

.descricao_produto{
    font-size: 20px;
    color:#cc0246 ;
    margin: 20px;
}
1 resposta
solução!

Você precisa alterar a "width" da sua "ul" com a classe "produtos".

.produtos{
    width: 1000px;
    margin: 0 auto;
}

Se a largura for do tamanho da tela ou maior, o navegador não vai criar as margens e assim o conteúdo não fica centralizado.

Diminui a largura que vai funcionar. Sugiro fazer isso utilizando as ferramentas do desenvolvedor que tem nos browsers, é mais fácil de ver o comportamento de acordo com as mudanças que você vai fazendo.