Entrar Ainda não tem acesso?
6
respostas

[Dúvida] Justify-Content não funciona

Referente ao curso HTML e CSS: Classes, posicionamento e Flexbox, no capítulo Estilos de texto e fontes e atividade Alinhando o conteúdo

por Geovanna Miller de Freitas Chaves
| 18k xp | 4 posts

Gostaria de ajuda pois o justify-content: space-between não funciona, não sei o que estou fazendo de errado.

<!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</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="título-destaque">com um Front-end de qualidade!</strong></h1>
            <p>Olá! Sou Joana Santos, 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>
            <a href="https://instagram.com/rafaballerini">Instagram</a>
            <a href="https://github.com/guilhermeonrails">GitHub</a>
        </section>
        <img src="JoanaSantos.png" alt="Foto da Joana Santos Programando">
    </main>
    <footer></footer>
</body>
</html>
*{
    margin: 0;
    padding: 0;
}

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

.título-destaque {
    color: #22D4FD;
}

.apresentacao {
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
6 respostas
por Renan Lima
| 3702.8k xp | 7836 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Geovanna! Tudo bem?

Pelo código que você nos enviou, parece que você está utilizando o justify-content: space-between corretamente na classe .apresentacao. Talvez o problema esteja na largura do elemento pai, que pode estar impedindo que o justify-content funcione como esperado.

Uma dica é verificar se o elemento pai da classe .apresentacao está com a largura correta para que o justify-content funcione. Você pode tentar adicionar a propriedade width: 100%; no seletor body para garantir que o elemento pai da classe .apresentacao ocupe toda a largura da página.

Caso ainda assim o problema persista, verifique se não há outras propriedades CSS que possam estar interferindo no justify-content.

Espero ter ajudado e bons estudos!

por Geovanna Miller de Freitas Chaves
| 18k xp | 4 posts

Olá Renan, tudo e você?

Eu fiz o que você sugeriu e mesmo assim não funcionou:

*{
    margin: 0%;
    padding: 0%;
}

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

.título-destaque {
    color: #22D4FD;
}

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

}

<!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</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="título-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://instagram.com/rafaballerini">Instagram</a>
            <a href="https://github.com/guilhermeonrails">GitHub</a>
        </section>
        <img src="JoanaSantos.png" alt="Foto da Joana Santos Programando">
    </main>
    <footer></footer>
</body>
</html>
por Renan Lima
| 3702.8k xp | 7836 posts
Alura Scuba Team Apoio Educacional - Alura

Ah sim, O seu código está correto e já está funcionando o "justify-content: space-between;", eu acho que a sua tela pode ser menor que a utilizada no curso, nesse caso pode ser que os elementos fiquem grudados, uma opção é diminuir a margem da classe .apresentacao que estava margin: 10%;, você pode tentar diminuir essa margem e ver se melhora, eu testei no meu notebook com a margin: 3%; e ficou legal, Fica assim:

.apresentacao {
    margin: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
por Geovanna Miller de Freitas Chaves
| 18k xp | 4 posts

Mas mesmo minha tela sendo menor, eu acho que daria para vê uma diferença. 

*{
    margin: 0%;
    padding: 0%;
}

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

.título-destaque {
    color: #22D4FD;
}

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

Como ficou: Insira aqui a descrição dessa imagem para ajudar na acessibilidade Está certo dessa maneira??

por Renan Lima
| 3702.8k xp | 7836 posts
Alura Scuba Team Apoio Educacional - Alura

O flex-box e o justify-content estão funcionando, porém parece continuar grudado, eu testei aumentando a margin, parece que ficou melhor do que diminuir para 3%, testa coloca 10% e vai subindo e testando, tipo 11% 12% etc, até ficar legal.

por Ana Paula Vieira Da Costa
| 27.1k xp | 4 posts

Coloquei o bloco da apresentação assim e funcionou (estava com o mesmo problema q o seu):

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

altura 15% e largura 8%