minha pagina de produtos não centraliza, e eu não consigo vê onde está o erro. poderiam me ajudar?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Produtos - Barbearia Alura</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="caixa">
<h1><img src="logo.png"></h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="produtos.html">Produtos</a></li>
<li><a href="contato.html">Contatos</a></li>
</ul>
</nav>
</div>
</header>
<main>
<ul class="produtos">
<li>
<h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou maquina, como o cliente preferir</p>
<p class="produto-preco">R$ 25,00</p>
</li>
<li>
<h2>Barba</h2>
<img src="barba.jpg">
<p class="produto-descricao">Corte e desenho profissional de barba</p>
<p class="produto-preco">R$ 18,00</p>
</li>
<li>
<h2>Cab
.produtos {
width: 940px ;
margin: 0 auto;
padding: 50px 0;
}
.produtos li{
display: inline-block;/*Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.*/
text-align: center;
width: 30%; /* Cada produto ocupa 30% dos 940px */
vertical-align: top;
margin: 0 1.5%; /* margem nas laterais (esquerda e direita) de todos os produtos, somando com os 90% dos 940px, chegando em 100%. */
padding: 30px 20px; /* espaçamento (cima e baixo) de 30px e <direita e esquerda) de 20px. */
box-sizing: border-box; /*Os 30% são definitivos e os pixels do padding estão dentro dele */
border: 2px solid #000000; /* Tamanho | Tipo | Tamanho */
border-radius: 10px; /*Arredonda as bordas*/
}
.produtos li:hover { /* Aplica uma mudança na cor da borda quando o usuário passa o cursor sobre o elemento. */
border-color: #C78C19;
}
.produtos li:active { /* Aplica uma mudança na cor da borda quando o usuário está ativando um elemento. */
border-color: #088C19;
}
.produtos li:hover h2 { /*O h2 quando o mouse estiver por cima dos li dos produtos */
font-size: 34px;
}
.produtos h2 {
font-size: 30px;
font-weight: bold; /* Define o peso de importância. */
}
.produto-descricao {
font-size: 18px;
}
.produto-preco {
font-size: 22px;
font-weight: bold;
margin: 10px 0 0;
}
footer {
text-align: center;
background: url("bg.jpg"); /*No background, referenciamos uma imagemc com "url()" */
padding: 40px 0;
}
.copyright {
color: #FFFFFF;
font-size: 13px;
margin: 20px 0 0;
}
main {
}
form {
margin: 40px 0;
}
form label, form legend { /* criar uma etiqueta para o input, com a tag <label> */
display: block; /*Faz com que ocupe a linha inteira */
font-size: 20px;
margin: 0 0 10px;
}
.input-padrao { /* A tag <input>, para a entrada de dados do usuário */
display: block; /*Faz com que ocupe a linha inteira */
margin: 0 0 20px;
padding: 10px 25px;
width: 50%;
}
.checkbox {
margin: 20px 0;
}
.enviar {
width: 40%;
padding: 15px 0;
background: orange; /* cor de fundo*/
color: white; /* cor do texto*/
font-weight: bold; /*fonte em negrito*/
font-size: 18px; /* tamanho da fonte*/
border: none; /* tirando a borda padrão*/
border-radius: 5px; /* criando canto arredondado*/
transition: 1s all; /* espera de 1 segundos p mudar de cor*/
cursor: pointer; /*qdo o mouse estiver por cima o cursor muda*/
}
.enviar:hover { /*Quando o mouse está por cima do botão*/
background: darkorange; /* mudar a cor de fundo qdo o mouse passa por cima*/
transform: scale(1.2); /* aumenta o tamanho*/
}
table {
margin: 20px 0 40px;/*espaçamento externo*/
}
thead {
background: #555555; /*cor de fundo*/
color: white;
font-weight: bold; /*fonte em negrito*/
}
td, th {
border: 1px solid #000000; /*tamanho da borda e com cor*/
padding: 8px 15px; /*espaçamento interno*/
}
