Solucionado
Esse é meu link do projeto, acontece que revisei todo o código CSS, com o disponibilizado pelo professor, e o resultado não é o mesmo. Por Exemplo meu rodapé, ficou logo abaixo do cabeçalho, antes dos destaques
https://github.com/gordolucas88/Alura_/tree/master/Formacao%20HTML%20e%20CSS/CSS%20Grid/alura-store
E aí, Rafael. Tudo bem?
Seguinte, no seu style.css você definiu que a sua página teria o seguinte template:
.app {
grid-template-areas: "cabecalho" "conteudo" "rodape";
}
Mas você se esqueceu de colocar as as seções de destaque e populares fora da tag <main class="conteudo">, deixando-a vazia, fazendo com que o CSS "jogue" essas seções para baixo do template.
É só coloca-las dentro da tag <main class="conteudo"> que ficará tudo okay. =)
<main class="conteudo">
<section class="destaques"> ... </section>
<section class="populares"> ... </section>
</main>
Espero ter ajudado. Bons estudos!
Muito Obrigado, deu certo, não olhei meu html, pois tinha certeza que o erro era no CSS