Bom dia,
Estou segundo o exemplo da instrutora onde ela cria uma classe "container" e logo apos ela coloca uma subclasse "principal" onde ela coloca a height da tela o display grid e o grid template, porem no meu caso quando faço o mesmo a tela fica pela metade e a imagem de fundo não cobre toda a tela, e só funciona quando jogo o height e o display dentro do principal, como posso resolver isso?
Oii, Daniel! Tudo bem?
Isso pode acontecer por alguns motivos, sendo assim, peço que observe alguns pontos em seu código, por gentileza.
Como sugestão, certifique de que a propriedade height da classe container esteja definida como 100% para que a div ocupe toda a altura da tela. Além disso, revise se a imagem de fundo está definida de forma certa, utilizando a propriedade "background-image" e ajustando as propriedades de tamanho e posicionamento conforme necessário.
Veja um exemplo para ficar mais ilustrativo:
.container {
height: 100%;
background-image: url(caminho_da_imagem.jpg);
background-size: cover;
background-position: center;
}
É preciso alterar o caminho_da_imagem.jpg para o caminho real da sua imagem.
Outro detalhe que é preciso se atentar é os erros de sintaxes, é bem comum e isso pode ocasionar impedimentos. Revise todo o seu código para apurar possíveis erros ortográficos e você pode conferir com o código da Instrutora disponibilizado no Github:
Caso o erro persista, peço que compartilhe o link do seu Github contendo o código e todos os arquivos necessários, por gentileza. Dessa forma, podemos buscar uma solução ainda mais assertiva.
Espero que dê certo!
Bons estudos, Daniel!