[Bug] Não consigo posicionar a Imagen. | HTML e CSS: Classes, posicionamento e Flexbox

ola, eu já estou a dias procurando o bug e não acho. Estava tudo indo bem (a Imagen estava posicionada corretamente) ate que quis igualar com o projeto do curso então a imagem desceu e eu nao lembro o que eu tinha antes e já tentei várias coisas e vendo alguns fóruns tb mas nada resolveu. Alguem vê o erro? Obrigada.![]( Insira aqui a descrição dessa imagem para ajudar na acessibilidade )

No CSS:

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@600&display=swap');
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    box-sizing: border-box;
    background-color: #000000;
    color: #f6f6f6;
    overflow: hidden;
}
 
.titulo-destaque {
    color: #22d4fd;
}
 
.apresentacao {
    margin: 10% 15%,
        display: flex;
    align-items: center;
    gap: 60px;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-width: 1200px;
    width: 100%;
}
 
.apresentacao__conteudo {
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
 
.apresentacao__conteudo__titulo {
    font-family: "Krona One", sans-serif;
    font-size: 36px;
}
 
.apresentacao__conteudo__texto {
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}
 
.apresentacao__links {
    display: flex;
    justify-content: space-between;
}
 
.apresentacao__links__link {
    background-color: #22d4fd;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

no HTML:

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Portfolio de Angéli</title>

    <link rel="stylesheet" href="Style.css">

</head>

 

<body>

    <header></header>

    <main class="apresentacao">

     <section class="apresentacao__conteudo">

        <h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível com um <strong class="titulo-destaque" > Front-end de qualidade!</strong></h1>

        <p class="apresentacao__conteudo__texto">Olá! Sou Angéli Haubert, desenvolvedora Front-end com especialidade em<strong> React, HTML e CSS</strong>.

        Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>

    <div class="apresentacao__links">

        <a class= "apresentacao__links__link " href="https://Instagram.com/xelihaubert"> Instagram</a>

        <a class= "apresentacao__links__link " href="https://github.com/guilhermeonrails"> Github</a>

    </div>

    </section>

    <img src="Imagem.jpg" alt="Foto da Joana Santos programando">

    </main>

<footer></footer>

</body>

</html>

Obrigada pela ajuda

Olá, Angeli!

Pelo que vejo, o problema pode estar relacionado ao flex-direction: column; que você aplicou na classe .apresentacao. Quando você define a direção do flex como coluna, todos os itens dentro do container flex serão empilhados verticalmente.

Para alinhar a imagem ao lado do conteúdo, altere a direção do flex para row ou não defina direção, assim, você não precisa usar flex-direction. Sua classe .apresentação pode permanecer igual à da aula.

.apresentacao{
    margin: 10% 15%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

Uma observação, caso sua tela seja menor que 1920x1080, o resultado fica um pouco diferente do código em aula, caso isso aconteça é por conta, do código está utilizando medidas fixas, como o PX, mas com o decorrer dos próximos cursos, novas medidas serão apresentadas e isso será reparado.

Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

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

PRORROGAMOS O DESCONTO!