[Dúvida] Tela diferente

:root { --branco-principal: #FFFFFF; --cinza-secundario: #c0c0c0; --botao-azul: #167bf7; --cor-de-fundo: #00030c; --fonte-principal:'Inter'; } body { background-color: var(--cor-de-fundo); color: var(--branco-principal); font-family: var(--fonte-principal); font-size: 16px; font-weight: 400; } * { margin: 0; padding: 0; } .principal { background-image: url("imagens/Background.png"); background-repeat: no-repeat; background-size: contain; } .container { height: 100vh; display: grid; grid-template-columns: 50% 50%; } .container__botao { background-color: var(--botao-azul); border-radius: 10px; padding: 1%; color: var(--branco-principal); display: 1em; flex-direction: column; text-decoration: none; margin-bottom: 1em; width: 300px; } .botao__secundario { background-color: transparent; border: 2px solid var(--branco-principal); text-decoration: none; width: 300px; } .container__aviso { font-size: 10px; color: var(--cinza-secundario); } .container__titulo { font-size: 30px; font-weight: 400; } .container__img { margin: 1em 0 2em 0; flex-direction: row-reverse; flex-direction: column; }

Oi, Felype, tudo bem?

Notei que na sua classe container__botao você está utilizando algumas propriedades diferentes e que podem estar afetando o seu código e o posicionamento dos elementos na tela, como, o display:1em. Nessa propriedade, utilizamos valores como inline-block, block e flexentre outras. Nesta situação a instrutora utiliza o valor block. Além disso, as propriedades flex-direction, pode ser removida, pois não é aplicada quando o display está com valor diferente de flex. Desta forma o seu código com essas correções ficaria assim:

.container__botao {
    background-color: var(--botao-azul);
    border-radius: 10px;
    padding: 1%;
    color: var(--branco-principal);
    display: block;
    text-decoration: none;
    margin-bottom: 1em;
    width: 300px;
}

Outro ponto importante é que se a imagem de fundo não estiver aparecendo para você, o problema pode estar relacionado ao caminho d aimagem. Note que a pasta compartilhada pela instrutora tem o nome "img" e você colocou no caminho "imagens". Para corrigir essa situação, você pode alterar o caminho na propriedade background-image para (url("img/Background.png");).

Caso ainda esteja com dificuldade, peço que você compartilhe o link do seu projeto no GitHub ou uma pasta com todos os arquivos que você utilizou no através do Google Drive. Dessa forma, conseguirei realizar os testes necessários e te ajudar de forma mais assertiva. Lembre-se que, se enviar os arquivos por meio do Google Drive, é necessário conceder permissão para que eu possa ter acesso.

Espero que dê tudo certo. Caso tenha dúvidas, conte com o fórum. Abraços!

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