Espaçamento | HTML e CSS: Classes, posicionamento e Flexbox

Não obtive o espaçamento entre a imagem e o texto o que posso ter feito de errado? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <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 Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. 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://www.instagram.com/">Instagram</a>
                    <a class="apresentacao__links__link" href="https://github.com/">Github</a>
                </div>
            </section>
            <img src="imagem.png" alt="Imagem de uma mulher de cabelo longo, sorrindo e  olhando para a tela de um laptop">
    </main>
        
        <footer>

        </footer>
    </header>
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&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__links{
    display: flex;
    justify-content: space-between;
}

.apresentacao__links__link{
    background-color: #22D4FD;
    width: 280px;
    text-align: center;
    border-radius: 16px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #000000;
    font-family: 'Montserrat', sans-serif;
}

Olá, Igor! Tudo bem?

Como não definido nenhum tamanho estático ou dinâmico para a div com a classe apresentação, os elementos dentro dela vão compor todo o espaço, por isso que mesmo adicionando a propriedade justify-content: space-between; não há um espaçamento entre os elementos.

Contudo, podemos adicionar outra propriedade, o gap. Com ele podemos definir literalmente um espaçamento entre os elementos numa determinada div, será apenas um espaçamento vazio. Então, para aplicar essa propriedade no seu projeto corretamente, você precisa adicionar ela na configuração CSS para a classe apresentacao. Segue o exemplo:

.apresentacao {
    /* outros códigos aqui acima...*/
    gap: 82px; /* Isso adicionará um espaço entre todos os elementos filhos flex */
}

Após aplicar, certifique-se de salvar o seu arquivo CSS, e então, ao acessar sua página de teste deve está com o espaçamento definido.

Espero ter ajudado e bons estudos!

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

PRORROGAMOS O DESCONTO!