[Projeto] A imagem de fundo não esta tendo o mesmo comportamento do video | HTML e CSS: praticando HTML/CSS

Olá, tentei fazer sozinho essa primeira parte pra me testar mesmo, porem a imagem de fundo tem sido um problema pra mim, tentei fazer parecido do video mas o comportamento dela esta sendo bem diferente, e se eu aumento a largura dela com width o texto que fica em baixo das ancoras (classe="observacao") acompanha a imagem, saindo da centralização do restante dos itens.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="reset.css">
    <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=Inter:wght@400;700&display=swap" rel="stylesheet">
    <title>Alura+ e AluraLínguas</title>
</head>

<body>
    <header>
    </header>
    <main>
        <section class="container primeira__sessao">
            <h1 class="enunciado">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1> 
            <div class="assine">
                <img class="combo" src="./imagens/Combo.png" alt="foto dos instrutores">
                <a class="assine__doze" href="">Assine por 12x de R$ 120,00*</a>
                <a class="assine__alura" href="">Assinar somente o Alura+</a>
                <p class="observacao">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
            </div>
        </section>
    </main>
    <footer>

    </footer>
</body>

</html>

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');

:root {
    --preto: #000000;
    --branco-titulo: #ffffff;
    --branco-texto: #F9F9F9;
    --cinza: #C0C0C0;
    --azul-alura: #167BF7;
    --vermelho-alura: #EC2F46;
}

body {
    display: flex;
    background-color: var(--preto);
    font-family: 'Inter', sans-serif;
    text-decoration: none;
    margin-left: 5.75rem;

}

.primeira__sessao {
    /* box-sizing: border-box 3.375rem 179.93rem 7.81rem 49.87rem; */
    background-image: url(imagens/Background.png);
    background-repeat: no-repeat;
    background-size: contain;
}

.container{
    height: 100vh;
}

.enunciado {
    color: var(--branco-titulo);
    font-size: 1.75rem;
    font-weight: 700;
    width: 36.75rem;
    text-align: center;
    margin-top: 7.81rem;
}

.combo{
    justify-content: center;
    text-align: center;
    margin-left: 7rem;
    margin-top: 1.38rem;
    width: 21.75rem;
    height: 6.25rem;
}

.assine {
    display: flex;
    flex-direction: column;

}

.assine__doze {
    /* estilo */
    background-color: var(--azul-alura);
    border-radius: 0.5rem;

    /* fonte */
    color: var(--branco-texto);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;

    /* layout */
    text-align: center;
    display: flex;
    width: 32rem;
    padding: 1rem;
    line-height: 150%;
    margin-top: 3.38rem;
    justify-content: center;
}

.assine__doze:hover {
    background-color: #135ab1;
}


.assine__alura {
    border: 1px solid #FFF;
    border-radius: 0.5rem;

    /* fonte */
    color: var(--branco-texto);
    font-size: 1rem;
    font-weight: 400;
    font-style: normal;

    /* layout */
    text-align: center;
    display: flex;
    width: 32rem;
    padding: 1rem;
    line-height: 150%;
    margin-top: 1rem;
    justify-content: center;
}

.assine__alura:hover {
    background-color: #222222;
}

.observacao {
    color: var(--cinza);
    font-size: 0.75rem;
    text-align: center;
    margin-top: 1rem;
    justify-content: center;
}

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-align: none;
}