a pagina difere de estilo dependendo do navegador em que foi aberto

BOM DIA a todos!!! estou com uma duvida. quando abro uma pagina em dois navegadores diferentes a mesma pagina esta se comportando diferente. ex: era para um button se destacar e mudar de cor quando o maouse estiver em cima, mas no crome nao acontece nada mais no mozilla sim!! o que sera que eu fiz de errado!?? aproveitanto. como faço para tirar uma margem a direita de prenchimento de fundo?

HTML

<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="./img/Combo.png" alt="o combo+ e a juncao do alura+ e o alura lingua" class="container__imagem">
            <a href="https://www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
            <a href="https://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 (referente a imagem de fundo)

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

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


css (referente ao BUTTON)
.container__botao {
display: grid;
grid-template-columns: none;
align-items: center;
background: var(--botao-azul);
text-decoration: none;
border-radius: 5px;
color: var(--branco-principal);
padding: 1em;
margin: 1em 0;
transition: ease-in-out 0.5s;
}

.container__botao:hover {
scale: 1.15;
background: blue;
}

.container__botao:active {
transition: none;
background: red;
}