[Dúvida] Praticando, ESPACAMENTO DIFERENTE DO FIGMA | HTML e CSS: praticando HTML/CSS

Estou com duvida nessa parte ![o projeto de voces] https://cdn1.gnarususercontent.com.br/1/1961872/5bffcc90-faed-4a79-a471-e65b5b036af8.png); ![O MEU PROJETO!] https://cdn1.gnarususercontent.com.br/1/1961872/bef1c71a-81ad-454a-a345-344893419700.png) aqui no figma fica o titulo ea ancora bem em cima do background ja no meu nao fica um espacamento diferente isso e realmente um problema?

<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">
    <title>Alura Plus</title>
</head>

<body>
    <section class="container principal">
        <div class="container__caixa">
            <h1 class="container__titulo"> Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
            <img src="assets/Combo.png" alt="O combo+ e a juncao do alura+ eo alura lingua" class="container__imagem">
            <a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="www.alura.com.br" class="container__botao botao__secundario"> Assinar somente o Alura+</a>
            <p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
        </div>
    </section>
    
    <section class="container secundario">
        <img src="assets/Plataformas.png" alt="monitor e celular alura aberto" class="secundario__imagem">
        <div class="container__descricao">
            <h2 class="decricao_titulo">Assista do seu jeito</h2>
            <p class="descricao_titulo">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
        </div>
    </section>
</body>
</html>

(CSS )

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

:root { --branco-principal: #FFFFFF; --cinza-secundario: #C0C0C0; --botao-azul: #167BF7; --cor-de-fundo: #00030C; --font-primaria: 'Inter', sans-serif; }

body { background-color: var(--cor-de-fundo); color: var(--branco-principal);

}

{ margin: 0; padding: 0; }

.principal { background-image: url("assets/Background.png"); background-repeat: no-repeat; background-size: contain; align-items: center; text-align: center; }

.container { height: 100vh; display: grid; grid-template-columns: 33% 33%; }

.container__caixa { margin: 0 6em; }

.container__titulo { font-size: 28px; font-weight: 700; font-family: var(--font-primaria);

}

.container__imagem { margin: 1em 0 2em 0; }

.container__botao { text-decoration: none; background-color: var(--botao-azul); border-radius: 5px; padding: 1em; font-family: var(--font-primaria); font-size: 16; color: var(--branco-principal); display: block; font-weight: 400; margin-bottom: 1em;

}

.botao__secundario { background-color: transparent; text-decoration: none; border: 2px solid var(--branco-principal); border-color: var(--cinza-secundario); font-family: var(--font-primaria); font-weight: 400;

}

.container__aviso { color: var(--cinza-secundario); font-family: var(--font-primaria); font-weight: 400; font-size: 12;

}

.secundario__imagem { margin: 0 165px;

}

.descricao__titulo { margin: 318px 69px; }