Olá, Nícolas.

Tudo bem?

Como que fica o resultado no site? Ele bagunça tudo, quebra alguma parte do site?

Qualquer coisa manda um print do site também!

No caso no HTML precisa colocar as duas classes separadas por um espaço na tag para ele saber que são duas classes CSS diferentes, aí no arquivo CSS nesse caso em específico precisa colocar uma de cada vez com seus estilos, coloca primeiro uma põe os estilos e depois das chaves a outra com os estilos dela.

Teria que ficar assim:

HTML:

<section class="principal container">
        <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="Combo.png" alt="O combo+ é a junção do alura+ e o alura língua" 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>

CSS:

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 5px;
    padding: 1em;
    color: var(--branco-principal);
    display: block;
}

.botao__secundario {
    background-color: transparent;
    border: 2px solid var(--branco-principal);
}

Espero ter ajudado.

Qualquer dúvida manda aqui de novo :)