2
respostas

[Dúvida] justify-content:space-between não funciona!

Index

<!DOCTYPE html>

<html lang="en">

<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>Portfólio</title>
    <link rel="stylesheet" href = "style.css":
</head>

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

            <p>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>

            <a href = "https://www.instagram.com/">Instagram</a>

            <a href = "https://github.com/login"> GitHub</a>
        </section>

        <img src = "imagem.png" alt = "joana santos programando">

    </main>
    <footer></footer>
</body>
</html>

CSS

*{
    margin: 0;
    padding:0;
}

body{
    height: 100vh;
    box-sizing:border-box;
    background-color:#000000;
    color: #F6F6F6;

}

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

.apresentacao{
    display: flex;
    align-items:center;
    justify-content: space-between;
}   
2 respostas

Olá Amanda! Tudo bem?

Pelo que pude observar no seu código HTML e CSS, a propriedade justify-content: space-between está correta e deveria estar funcionando. Talvez o problema esteja em outro lugar do seu código.

Uma sugestão é verificar se a largura do elemento pai (no caso, a classe .apresentacao) é suficiente para que os elementos filhos sejam distribuídos com espaço entre eles. Você pode tentar adicionar um width: 100%; na classe .apresentacao para garantir que ela ocupe todo o espaço disponível.

Outra possibilidade é verificar se não há outras propriedades CSS que estão interferindo no comportamento do justify-content. Certifique-se de que não há outras classes ou IDs que estejam sobrescrevendo essa propriedade.

Espero ter ajudado e bons estudos!

Boa noite, Amannda. Você poderia adcionar uma imagem do problema? Além disso, para saber o exatamente está acontecendo, você pode inspecionar a página com o DevTools do navegador.