[Dúvida] coloquei meu codigo igual da professora só que o resultado esta diferente.. nao está aparecendo as borda no botao secundario

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section class="container principal">
        <div>
    <h1>
        Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.
    </h1>
    <img src="img/Combo.png" alt="">
    <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_secundario"> assinar somente o alura +</a>
</div>
</section>
</body>
</html>
:root{
   --branco-principal: #FFFFFF;
   --cinza-secundario: #C0C0C0;
   --botão-azul: #167BF7;
   --cor-de-fundo:#00030C; 

}
body {
    background-color: var(--cor-de-fundo);
    color:var(--branco-principal);
}
* {
    margin: 0;
    padding: 0;
}
.principal{
    background-image:url(img/Background.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.container{
    height: 100vh;
    display: grid;
    grid-template-columns: 50% 50%;

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

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

Olá, Jose! Tudo bem?

Houve um pequeno erro de digitação na classe do seu botão secundário. No seu HTML, você definiu a classe como "container__botao_secundario", mas no seu CSS, você está tentando estilizar a classe ".botao_secundario".

Para corrigir esse problema, você deve fazer com que o nome da classe no CSS corresponda ao nome da classe no HTML. S

Portanto, no seu CSS, em vez de ".botao_secundario", você deve usar ".container__botao_secundario". Seu CSS ficaria assim:

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

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

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

Mergulhe em programação