Sugestão Alura - Arrumando para Mobile parte de Produtos

Olá, Mateus. Como vai?

O primeiro passo é utilizar a estilização responsiva para as páginas html que você quer editar com: <meta name="viewport" content="width=device-width"> igual no index.html do projeto original, e conferir se esta exportando o arquivo de css corretamente.

Um ponto interessante é reparar que o instrutor, no index.html, altera a estilização de páginas com telas até 480px, utilizando no css @media screen and (max-width: 480px) {escrevendo a estilização aqui}, depois desse tamanho(480px), até 1000px, não fica com uma estilização adequada, você pode exercitar melhorando essa parte também.

Há difentes formas de estilizar podendo chegar no mesmo resultado, na página de produtos, eu habilitei a estilização em páginas menores com o viewport como passei acima, e no css fiz algumas mudanças, como abaixo(para telas até 480px):

E no código coloquei assim:

(código acima do projeto original)
...
header {
    text-align: center; ---> para poder centralizar o testo do menu
}

.produtos { ----> para ajustar o espaçamento com o restante da página
    width: auto;
}

.produtos li {  ----> ajustar as li 
    margin: 20px 80px;
    width: 60%;
    }
}

É interessante testar o projeto em telas menores e reparar que a imagem das li ficam sobrepondo as bordas, você pode diminuir elas utilizando a tag height (eu coloquei 200px e conseguiu suportar telas com até 375px, depois disso as imagens ficaram meio bugadas de novo).

As outras páginas você pode ir testando parecido com o que fiz, que é também o que o professor ensina em aula. Uma dica é fazer toda a Formação HTML e CSS. Pois você vai exercitar muito sobre estilização de páginas nesses cursos.

Espero ter ajudado, bons estudos! =D