[Dúvida] Meu projeto não está ficando igual ao do professor, disposição dos elementos na tela diferente.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade A imagem deveria ficar ao lado do texto, mas fica embaixo. Já revisei meu código várias vezes e acabei copiando e colando o código do próprio professor e mesmo assim continua errado. Vou deixar meu código abaixo:

Banner.vue

<template>
    <header class="banner">
      <div class="apresentacao">
        <img src="../assets/images/logo.svg" alt="Logo do Cookin' Up" class="logo">
  
        <p class="cabecalho-lg frase-cabecalho">
          <span class="texto-verde">Um banquete de ideias para</span>
          despertar o chef que há em você!
        </p>
  
        <p class="subtitulo-lg">
          Explore novas receitas todos os dias com os ingredientes que estão ao seu alcance!
        </p>
      </div>
  
      <img src="../assets/images/foto-banner.png" alt="Foto de uma mulher cozinhando com uma bacia de vidro nas mãos. Ela está sorrindo e está apoiando um celular entre seu rosto e ombro." class="foto-banner">
    </header>
  </template>
  
  <style scoped>
  .banner {
    padding: 4rem 7.5rem;
    color: var(--creme);
  
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 3.25rem;
  }
  
  .logo {
    height: 4.5rem;
    margin-bottom: 3rem;
  }
  
  .frase-cabecalho {
    margin-bottom: 2rem;
  }
  
  .texto-verde {
    color: var(--verde-medio, #3D6D4A);
  }
  
  .foto-banner {
    width: 35rem;
  }
  
  @media only screen and (max-width: 1300px) {
    .banner {
      padding: 4rem 3.75rem;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }
  
    .logo {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  @media only screen and (max-width: 767px) {
    .banner {
      padding: 4rem 1.5rem;
    }
  
    .foto-banner {
      width: min(100%, 21.25rem);
    }
  }
  </style>

App.vue

<script lang="ts">
import Banner from './components/Banner.vue';

export default {
  components: { Banner }
}
</script>

<template>
  <Banner />
</template>

Oiii Alanis! Tudo bem com você?

Eu testei seu projeto aqui usando a versão do curso como comparação, e reproduzi o tamanho de tela que você indicou na captura de tela que você postou na descrição do seu tópico. E eu só precisei editar o caminho das imagens que no seu estava: "../assets/images/foto-banner.png", e no do curso estava "../assets/imagens/logo.svg", mas todas as outras partes estavam iguais, então o projeto rodou certinho.

Com isso eu percebi que, na verdade, não tem nada de errado com o seu projeto. O que aconteceu foi que como você estava vendo o projeto em uma tela com uma dimensão um pouco menor, o projeto se adaptou para ficar responsivo ao tamanho da tela que você estava olhando. E isso é algo que foi configurado no CSS que foi passado no curso, assim o projeto em telas menores se ajusta automaticamente para não "quebrar" o layout do projeto, então, deixar a imagem abaixo da divisão onde os textos estão nada mais é do que uma adaptação indicada no CSS para deixar o projeto responsivo, só isso.

Então, não precisar se preocupar, seu projeto está certo, se você quiser é só aumentar o tamanho da visualização do seu projeto usando o Dev Tools para isso e você vai ver como o projeto se ajusta.

Em suma era isso, tá? Se precisar de algo é só falar.

Abraços e bons estudos.