Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

página distorcida

oi gente, eu queria entender por que o meu código deixou a página toda distorcida, mas quando copiei o código da aula funcionou. Não consigo enxergar o erro, alguém pode me mostrar??

/*meu código*/
.populares__card{
    background: #fdfdfd;
    display: grid;
    grid-template-areas: 
      "card-imagem"
      "card-corpo";
    grid-template-columns: 100%;
    grid-template-rows: 173px auto;
    margin-right: 1rem;
    width: calc(20%- 1rem);
/*código da aula*/
.populares__card {
    background: #fdfdfd;
    display: grid;
    grid-template-areas: 
        "card-imagem"
        "card-corpo";
    grid-template-columns: 100%;
    grid-template-rows: 173px auto;
    margin-right: 1rem;
    width: calc(20% - 1rem);
} 

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Oi Sthefanny, tudo bem?

A diferença é o espaço que está faltando no seu:

width: calc(20%- 1rem);

Perceba que o - está grudado com20%, você precisa dar um espaço. Igual o da aula:

width: calc(20% - 1rem);

Esse espaço faz a diferença.

Espero ter ajudado.

Um abraço e bons estudos.