Consolidando o seu conhecimento (CSS comentado, pra quem tiver dúvidas) | HTML5 e CSS3 parte 2: posicionamento, listas e navegação

Adicionei alguns comentários no arquivo CSS para lembrar alguns comandos. Alguns ficaram sem comentário. Se tiver algum comentário errado, por favor, me corrijam.

produtos.html

<!DOCTYPE html>

<html lang="pt-br">

    <head>
        <title> Produtos - Barbearia Alura </title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="reset.css">       <!-- Para limpar todas as configurações padrões do html -->
        <link rel="stylesheet" href="produtos.css">    
    </head>

    <body>
        <header>                                    <!-- Cabeçalho -->
            <div class="caixa">                        
                <h1> <img src="logo.png"> </h1>

                <nav>            <!-- MENU DE NAVEGAÇÃO, COMANDO QUE RECEBERÁ LINKS -->
                    <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>                                    <!-- Fim do Cabeçalho -->

        <main>                                        <!-- Função Principal -->
            <ul class="produtos">
                <li> 
                    <h2> Cabelo </h2> 
                    <img src="cabelo.jpg">
                    <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="barba.jpg">
                    <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="cabelo+barba.jpg">
                    <p class="produto-descricao"> Pacote completo de cabelo e barba </p>
                    <p class="produto-preco"> R$35,00 </p>
                </li>
            </ul>
        </main>
    </body>
</html>

produtos.css

header {
    background: #AAAAAA;            /* Cor do plano de fundo do header */
    padding: 20px 0;                /* Preenchimento do header */
}

.caixa {
    position: relative;
    width: 950px;                    /* configuração padrão para o css */
    margin: 0 auto;                    /* configuração padrão para o css */
}

nav {
    position: absolute;
    top: 110px;                        /* Posição em relação ao topo */
    right: 0px;                        /* Posição em relação à direita */
}

nav li {
    display: inline;                /* Desbloqueio de 100% do conteúdo na horizontal (algo mais pode ser adicionado ao lado) */
    margin-left: 15px;                /* Margem à esquerda */
}

nav a {
    text-transform: uppercase;        /* O texto fica todo em maiúsculo */
    color: black;                    /* A cor do texto fica em negrito */
    font-weight: bold;                /* Reforçar a cor do texto */
    font-size: 22px;                /* Tamanho da fonte (padrão 16) */
    text-decoration: none;            /* Retirar as configurações padrões de link */

}

nav a:hover {                        /* Comando para mudar a cor do link quando o cursor passar por cima dele */
    color: #C78C19;
    text-decoration: underline;        /* Para retornar o sublinhado quando o cursor passar por cima do link */
}

.produtos {
    width: 940px;                    /* configuração padrão para o css */
    margin: 0 auto;                    /* configuração padrão para o css */
    padding: 50px 0;                /* 50px espaçamento externo superior e inferior, 0 laterais */
}

.produtos li {
    display: inline-block;
    text-align: center;                /* Texto alinhado ao centro */
    width: 30%;                        /* Tamanho de cada banner */
    vertical-align: top;
    margin: 0 1.5%;                    /* Margem vertical e horizontal */
    padding: 30px 20px;                /* Espaçamento interno vertical e horizontal */
    box-sizing: border-box;            /* Espaçamento lateral dentro do percentual */
    border: 4px solid black;        /* Isso é igual a: border-width; border-style; border-color; */
    border-radius: 20px;            /* Medida de "arredondamento" do quadrado. será a medida em raios que irei adc nas bordas */
}

.produtos li:hover {                /* Quando o cursor passar por cima */
    border-color: #C78C19;            /* Cor da borda */
    color: #C78C19;                    /* Cor do texto */
}

.produtos li:active {                /* Quando o cursor for clicado */
    border-color: green;            /* Cor da borda */
    color: green;                    /* Cor do texto */
}

/* OBS: Para mudar o estilo de qualquer elemento quando o cursor passar por cima, eu devo especificar o elemento, pois 
os elementos são específicos, portanto, devem ser aplicadas as alterações dentro de cada nova chave. */ 

.produtos li:hover h2 {                /* Local que eu quero alterar (título) */
    font-size: 32px;
}

.produtos h2 {                        /* Título */
    font-size: 30px;                /* Tamanho do texto */
    font-weight: bold;                /* Para adicionar cor mais escura */
}

.produto-descricao {                /* Texto */
    font-size: 18px;                /* Tamanho do texto */
}

.produto-preco {                    /* Preço */
    font-size: 22px;                /* Tamanho do texto */
    font-weight: bold;                /* Para adicionar cor mais escura */
    margin-top: 10px;                /* margem apenas na parte superior */
}