[Sugestão] Meu texto não se alinhava com a imagem de fundo.

Aparentemente, no fórum, há um erro comum entre os programadores. Onde a "container__caixa" não se alinhava corretamente com a "background-image". No meu código, ocorreu esse mesmo erro, o texto ficava bem abaixo da imagem de fundo. Fui testando como poderia resolver e ao mudar a altura do "container" de 100vw para 50vw, o erro se resolveu.

Segue o texto do CSS:

style.css

/* Código anterior */
.principal{
    background-image: url("../img/Background.png");
    background-repeat: no-repeat;
    background-size: contain;
    align-items: center;
    text-align: center;
}

.container{
    height: 50vw;
    display: grid;
    grid-template-columns: 50% 50%;
}
/* Código posterior */