[Dúvida] media queries

a imagem não mudou nada ta do mesmo jeito( lateral), sera que é pq estamos usando pc diferentes? e olhe que fiz igual a que a aula ta mostrando. .......................................................................................................................... CSS: .@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');

:root { --cor-primaria: black; --cor-secundaria: yellow; --cor-terciaria: #22D4FD; --cor-hover: #272727; --fonte-primaria: 'krona one', sans-serif; --fonte-secundaria: 'Montserrat', sans-serif; }

• { margin: 0; padding: 0; }

body { box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); }

.cabecalho { padding: 2% 0% 0% 15%; }

.cabecalho__menu { display: flex; gap: 80px; }

.cabecalho__menu__link { font-family: var(--fonte-secundaria); font-size: 1,5rem; font-weight: 600; color: var(--cor-terciaria); text-decoration: none; }

.apresentacao { padding: 5% 15%; display: flex; align-items: center; justify-content: space-between; gap: 82px; }

.apresentacao__conteudo { width: 50%; display: flex; flex-direction: column; gap: 40px; }

.apresentcao__conteudo__titulo { font-size: 2,25rem; font-family: var(--fonte-primaria); }

.titulo-destaque { color: var(--cor-terciaria); }

.apresentacao__conteudo__texto { font-size: 1,5rem; font-family: var(--fonte-secundaria); }

.apresentacao__links { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px;

}

.apresentacao__links__subtitulo { font-family: var(--fonte-primaria); font-weight: 400px; font-size: 1,5rem; }

.apresentacao__links__navegacao { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-secundaria); width: 50%; text-align: center; border-radius: 8px; font-size: 1,5rem; font-weight: 600px; padding: 21.5px 0; text-decoration: none; color: white; font-family: monospace; }

.apresentacao__links__link:hover { background-color: var(--cor-hover); }

.apresentacao__imagem { width: 50%;

}

.rodape { padding: 24px;color: var(--cor-primaria); background-color: var(--cor-terciaria);text-align: center; font-family: var(--fonte-secundaria); font-size: 1,5rem; font-weight: 400;}

@media (max-whidth: 1200px) { .apresentacao { flex-direction: column-reverse; } } .............................................................................................................................. HTML:

<header class="cabecalho">
    <nav class="cabecalho__menu">
        <a class="cabecalho__menu__link" href="index.html">Home</a>
        <a class="cabecalho__menu__link" href="about.html">Sobre mim</a>
    </nav>
</header>
<main class="apresentacao">
    <section class="apresentacao__conteudo">
        <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> um Front-end de
                qualidade!</strong></h1>
        <p class="apresentacao__conteudo__texto">Olá! Sou Cecilia Aguiar, desenvolvedora de Front-end com especialidade em, HTML e
            CSS. Ajudo pequenos negócios e designers a colocarem em prática boas idéias.
            Vamos começar?</p>
            <div class="apresentacao__links">
                <h2 class="apresentacao__links__subtitulos">Acesse minhas redes:</h2>
                <a class="apresentacao__links__navegacao" href="https://github.com/ceciliaaguiar">
                    <img src="./assets/github.png">
                    Github
                </a>
                <a class="apresentacao__links__navegacao" href="https://instagram.com/cecylia_aguiar">
                    <img src="./assets/iinstagram.png">
                    Instagram
                </a>
            </div>
    </section>
    <img class="apresentacao__imagem" src="./assets/imagem desenvolvedor.png" alt="Imagem de um programador">
</main>
<footer class="rodape">
    <p>Desenvolvido por Alura.</p>
</footer>