in-line, inline block

Olá Taiane beleza?! Respondendo a sua primeira pergunta, o display: inline não irá funcionar nos links com tag pois eles são filhos de um outro elemento (com tag li neste caso), assim, é necessário que o estilo do display seja feito em seu pai (li) para que funcione: :D

A diferença entre o inline e o inline-block é o que falou. No inline você deixa todos ps elementos "em linha" e não pode alterar valores como padding e width, no inline-block você também os deixa em linha mas pode alterar os valores de padding e width (veja este link da documentação da w3school sobre) -

Na segunda questão, creio que a seleção no CSS foi feita assim apenas para ir "direto ao ponto" por haver apenas uma barra de navegação nav e pela proposta do curso mesmo, mas a melhor forma de se selecionar um elemento no CSS é por sua classe (crie sempre uma classe para os elementos que quiser editar, pois mais pra frente será assim que irá estilizar com o CSS) :D

Abraços!

Oi André! Primeiramente, obrigada pela resposta. Tentei no código colocar a classe em li ou inves de ul como estava, mas nao funcionou. O "inline" não funciona nesse caso, como no caso no nav. Para deixa-los alinhados, eu tenho que colocar o "inline-block". Vou colocar aqui o html desse caso, e o css:

<main>
            <ul class="produtos">    
                <li>
                    <h2>Cabelo</h2>
                    <img src="cabelo.jpg">
                    <p class="produto-descricao">Na tesoura ou 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>

CSS

.produtos li {  /* porque aqui so alinha com inline-block?*/
    display: inline-block;
    text-align: center;
    width:30%;
    vertical-align: top;
    margin: 0 1.5%;
    padding: 30px 20px;
    box-sizing: border-box;
    border: 2px solid #000000;
    border-radius: 10px;
}

Que isso Taiane, não há de quê! Perdão a demora, a mensagem de sua reposta não tinha chegado :/

Neste caso, se você colocar o inline na tag li o que ficará em disposição de linha são os componentes

 <h2>Cabelo</h2>
<img src="cabelo.jpg">
<p class="produto-descricao">Na tesoura ou máquina, como o cliente preferir</p>
 <p class="produto-preco">R$ 25,00</p>

Pois são filhos da tag li.

Colocando o inline na tag ul você não conseguirá o estilo que deseja pois estará colocando sua lista geral (sua tag ul com classe produto) em um display "em linha", e não seus componentes.

E por fim, colocando o inline apenas no .produto li você não verá seu estilo sendo alterado pois o display: inline não permite que haja modificação de padding ou width em seus componentes setados com este valor.

Portanto, para que você tenha o valor esperado (neste caso do curso) você precisa definir uma width e um padding para os elementos, sendo possível, neste caso, apenas com o display: inline-block.

Como você está definindo que dentro da tag li os elementos estejam dispostos inline COM padding configurado E que o elemento li tenha uma width de 30%, para esta configuração funcionar (assim como visto na documentação da W3C) o correto é utilizar o display: inline-block :D

Se você tentar alinhar desta forma utilizando apenas o display: inline no .produto li você verá que ao alinhar (no estilo inline) vai ocorrer uma quebra de linha, com o "Corte de cabelo" em cima, a "imagem" no meio e a "Descrição" abaixo, sem estarem dentro da borda definida nem nada, mas alinhados a partir do display: inline

obs: Pouco utilizamos o display: inline para nossas aplicações no dia-a-dia, por ser muito limitado e não permitir essas alterações de valores

Teste uma outra coisinha bacana que pode ajudar você a entender melhor.

Ao invés de in-line ou inline-block coloque apenas o valor display: block. Você vai ver como o cardezinho fica "arrumado" mas um abaixo do outro. O display: block tem esta função. Colocar os elementos um abaixo do outro e permitir definir sua largura.

Depois, adicione o inline que você verá acontecer o efeito esperado de estarem um ao lado do outro. Quando não tiver mais espaço na largura definida, um card irá quebrar para a linha de baixo :D

(aqui você encontra o que todas as propriedades display podem oferecer - https://www.w3schools.com/cssref/pr_class_display.asp)

Qualquer dúvida só falar

Muito obrigada, André! Ajudou bastante! ;))