1. java
  2. android
  3. c#
  4. .net
  5. javascript
  6. php
  7. jquery
  8. html
  9. sql

Porque o Justify-content space-between não funciona?

Criei uma div para alinhar os elementos "logo" e o "mainNav", uma coleção de butões. quero que a logo e a mainNav tenham um espaçamento igual deixando-os os dois no canto da tela, opostamente, com space between. Mas não funciona, deixei o flex de lado e coloquei float, e nada!

<!DOCTYPE html>
<html>
<head>
    <title>Teste Principal</title>
    <meta charset="utf-8">
    <meta lang="pt-br"">
    <meta title="author" content="Lolicon">
    <link rel="stylesheet" type="text/css" href="index.css">

</head>
<body>

    <header id="mainHeader">
        <div class="linha">

            <img class="logo" src="img/logo.png">
            <nav class="mainNav">
                <ul>
                    <li class="home"><a class="apagado" href="#">Home</a></li>
                    <li class="resenhas"><a href="resenhas">Resenhas Dedicadas</a></li>
                    <li class="listas"><a href="listas">Listas</a></li>
                    <li class="suporte"><a href="suporte">Suporte</a></li>
                </ul>
            </nav>



                    </div>
    </header>






    <main class="mainContent">
        <div>

        </div>
    </main>
</body>
</html>

Css:

*{
    margin: 0;
    padding: 0;
}
#mainHeader{
    display: inline-flex;
    align-items: center;
    border-bottom: solid 2px black;
    width: 100%;
    height: 100px;
    background-color: #999999;

}
.mainNav{

    display: block;
    width: 600px;



}
.mainNav a.apagado{
    color: rgba(250,250,250,.5);
}
.mainNav a{

    color: white;
    border-radius: 15px;
    padding: 10px;
background-color: #888888;
    border: 2px solid black;
    font-weight: 600;
    text-decoration: none;
}
.mainNav a:hover{

    background-color: #808080;
    transition: .5s ease;
}
.mainNav li{
    display: inline-block;
    margin: 0 5px 0 5px;
}

#mainHeader.linha{
    display: flex;
    width: 100%;
    height: auto;
    justify-content: space-between;

    background-color: red;
}
img.logo{



}

È um blog...

  1. Você vai ver essas setas em qualquer página de pergunta. Com elas, você pode dizer se uma pergunta ou uma resposta foram relevantes ou não.
  2. Edite sua pergunta ou resposta caso queira alterar ou adicionar detalhes.
  3. Caso haja alguma dúvida sobre a pergunta, adicione um comentário. O espaço de respostas deve ser utilizado apenas para responder a pergunta.
  4. Se o autor da pergunta marcar uma resposta como solucionada, esta marca aparecerá.
  5. Clique aqui para mais detalhes sobre o funcionamento do GUJ!

0 resposta

Não é a resposta que estava procurando? Procure outras perguntas com as tags css div ou faça a sua própria pergunta.