``` <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name

Acabei de encontrar o erro, o reset.css anula o padding. O que fazer neste caso, criar uma classe?

FOOTER NÃO ACEITA PADDING | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

<!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" />
  <link rel="stylesheet" href="css/produtos.css" />
  <link rel="stylesheet" href="css/reset.css" />
  <title>Produtos - Barberia Alura</title>
</head>

<body>
  <header>
    <div class="caixa">
      <h1><img src="img/logo.png" alt="" /></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>
    </div>
  </header>

  <main>
    <ul class="produtos">
      <li>
        <h2>Cabelo</h2>
        <img src="img/cabelo.jpg" alt="" />
        <p class="produto-descricao">
          Na tesoura ou na máquina, como o cliente preferir
        </p>
        <p class="produto-preco">R$ 25,00</p>
      </li>
      <li>
        <h2>Barba</h2>
        <img src="img/barba.jpg" alt="" />
        <p class="produto-descricao">Corte e desenho profissional de barba</p>
        <p class="produto-preco">R$ 18,00</p>
      </li>
      <li>
        <h2>Cabelo + Barba</h2>
        <img src="img/cabelo+barba.jpg" alt="" />
        <p class="produto-descricao">Pacote completo de cabelo e barba</p>
        <p class="produto-preco">R$ 35,00</p>
      </li>
    </ul>
  </main>

  <footer>
    <img src="img/logo-branco.png" alt="" />
    <p class="copyright">&copy; Copyright Barberia Alura - 2019</p>
  </footer>
</body>

</html>

header {
  background: #BBBBBB;
  padding: 20px 0;
}
.caixa {
  position: relative;
  width: 940px;
  margin: 0 auto;
}

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

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

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

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

.produtos {
  width: 940px;
  margin: 0 auto;
  padding: 50px 0;
}

.produtos li {
  /*background: #CCCCCC;*/
  display: inline-block;
  text-align: center;
  width: 30%;
  vertical-align: top;
  margin: 0 1.5%;
  box-sizing: border-box;
  padding: 30px 20px;
  /* border-color: #000000;
  border-width: 2px;
  border-style: solid;*/
  border-radius: 10px;
  border: 2px solid #000;
}

.produtos li:hover{
  border-color: #C78C19;
}

.produtos li:active{
  border-color: #088C19;
}

.produtos li:hover h2{
  font-size: 34px;
}

.produtos h2 {
  font-size: 30px;
  font-weight: bold;
}

.produto-descricao {
  font-size: 18px;
}

.produto-preco {
  font-size: 22px;
  font-weight: bold;
  margin-top: 10px;
}

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

.copyright{
  color: #FFF;
  font-size: 13px;
  margin: 20px 0 0;
  /*padding-bottom: 20px;*/
  /*font-size: 13px;*/
}

Mergulhe em programação