CSS falho | Git e GitHub: compartilhando e colaborando em projetos

Desde o curso anterior, sempre que eu abro o projeto pelo VS Code e inicio o Live Studio, a minha página fica com todos os elementos deslocados à esquerda, apesar de todo o código estar igual (não altero, a priori, o código disponibilizado pelos professores). Tanto que no outro curso da formação eu até mexi no CSS com medo de ser minha máquina, mas consegui centralizar os elementos e deixar mais ou menos parecido. A minha dúvida é por que quando eu inicio, todos os meus elementos ficam à esquerda.

Segue a imagem da página e os códigos:

Página com elementos deslocados à esquerda HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                    <p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="verificarChute()" class="container__botao">Chutar</button>
                    <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>

CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
}

body {
    background: linear-gradient(#1354A5 0%, #041832 33.33%, #041832 66.67%, #01080E 100%);
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}


body::before {
    background-image: url("img/code.png");
    background-repeat: no-repeat;
    background-position: right;
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.container {
    width: 80%;
    height: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 24px;
    border: 1px solid #1875E8;
    box-shadow: 4px 4px 20px 0px rgba(1, 8, 14, 0.15);
    background-image: url("img/Ruido.png");
    background-size: 100% 100%;
    position: relative;
}


.container__conteudo {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
}

.container__informacoes {
    flex: 1;
    padding: 3rem;
}

.container__botao {
    border-radius: 16px;
    background: #1875E8;
    padding: 16px 24px;
    width: 100%;
    font-size: 24px;
    font-weight: 700;
    border: none;
    margin-top: 2rem;
}

.container__texto {
    margin: 16px 0 16px 0;
}

.container__texto-azul {
    color: #1875E8;
}

.container__input {
    width: 100%;
    height: 72px;
    border-radius: 16px;
    background-color: #FFF;
    border: none;
    color: #1875E8;
    padding: 2rem;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

.container__botoes {
    display: flex;
    gap: 2em;
}

h1 {
    font-family: 'Chakra Petch', sans-serif;
    font-size: 72px;
    padding-bottom: 3rem;
}

p,
button {
    font-family: 'Inter', sans-serif;
}

.texto__paragrafo {
    font-size: 32px;
    font-weight: 400;
}

button:disabled {
    background-color: gray;
}

@media screen and (max-width: 1250px) {

    h1 {
        font-size: 50px;
    }

    .container__botao {
        font-size: 16px;
    }


    .texto__paragrafo {
        font-size: 24px;
    }

    .container__imagem-pessoa {
        display: none;
    }

    .container__conteudo {
        display: block;
        position: inherit;
    }

    .container__informacoes {
        padding: 1rem
    }
}

Desde já agradeço a atenção, bom dia a todos!

Olá, Pedro! Tudo bem?

Testei os códigos que você compartilhou e ao abrir a página HTML usando o Live Server não me ocorreu o problema que você demonstrou, todos os elementos da página se mantiveram como estão no projeto da aula.

Imagino que você tenha realizado alguma modificação antes de compartilhar ou coisa do tipo. Mas é estranho que tenham ficado dessa forma, tente apagar o cache do seu navegador ou até mesmo utilizar outro para abrir o projeto, o problema pode está relacionado com o navegador que você esteja utilizando.

No mais, peço que realize o passo que comentei anteriormente e estarei à disposição a caso de mais problemas.

Bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.