Olá Monica!
A solução que você encontrou, usando grid-template-columns: 550px, funcionou para manter tudo em uma coluna, mas isso pode não ser flexível dependendo do tamanho da tela ou do conteúdo.
Uma forma mais flexível de garantir que todos os itens fiquem em uma única coluna, independentemente do tamanho da tela, é usar grid-template-columns: 100%. Isso garantirá que a coluna ocupe toda a largura do grid container, mantendo todos os itens alinhados verticalmente em uma única coluna, mas não vai ficar legal, recomendo que utilize 50%, sendo assim vai ocupar metade da tela.
Aqui está um exemplo de como você poderia ajustar seu CSS:
.container {
display: grid;
grid-template-columns: 50%;
height: 100vh;
gap: 10px;
justify-items: center;
align-items: center;
}
Em relação ao problema dos tamanhos dos botões e letras que mencionou, isso pode estar relacionado ao zoom da tela. Verifique se a mesma está ocupando 100% da tela. Observe que o zoom pode interferir no texto, mas não na imagem, o que dá a impressão de que há discrepâncias entre os códigos, voce pode controlar o zoom, com o projeto aberto no navegador voce pode utilizar o CTRL + (+) ou CTRL + (-), para ajustar.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
