Zoom

A pagina está ficando com um zoom e não está igual dos professores eu coloquei pra rodar o codigo deles e ficou igual, tem algo no codigo que está errado?? Segue o codigo abaixo.
Pagina visualização normal:

Pagina em 80%:

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');

* {
    margin: 0;
    padding: 0;
}
body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #F6F6F6;
}

.titulo-destaque {
    color: #22D4FD;
}

.apresentacao {
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    
}

.apresentacao__conteudo__titulo {
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}

.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.apresentacao_botoes {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}
.apresentação_botoes_subtítulo{
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    font-size: 24px;
}

.apresentacao_link {
    /* background-color: #22D4FD; */
    display: flex;
    justify-content: center;
    gap: 16px;
    color: #ffffff;
    border:2px solid #22D4FD;
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}
.apresentacao_link:hover{
    background-color: #272727;
    padding: 3%;
}
.rodape{
    color: #000000;
    background-color: #22D4FD;
}

Olá, Stephanie. Tudo certinho?

É comum que o layout apresente variações de acordo com o tamanho da tela ou a resolução do monitor utilizado. Quando o espaço disponível é menor, como em telas de notebooks, por exemplo, os elementos do CSS tendem a se reorganizar para se ajustar à área visível, o que pode diferenciar o seu resultado visual daquele apresentado na aula.

Para garantir que o projeto se comporte de forma mais flexível, você pode utilizar o conceito de Media Queries. Essa técnica permite que o navegador aplique regras de estilização específicas apenas quando a tela atingir um determinado tamanho.

// Cole no fim do seu arquivo .css

@media (max-width: 1440px) {
  .apresentacao {
    margin: 10% 5%;
    gap: 60px;
  }
}

Se precisar de mais alguma ajuda ou quiser compartilhar o resultado após o teste, o fórum está à disposição.

Espero ter ajudado.

Abraços :)

Caso este post tenha lhe ajudado, por favor, marcar como solucionado

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema