Adding container div removes flexbox

Question

I'm creating a simple navbar with flexbox , but whenever i add a container div inside header to make the width 80% and center it with margin:0 auto flexbox's justify-content stops working.

html,
body {
  margin: 0;
  padding: 0;
  background-color: #24252A;
  color: white;
  height: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  background: gray;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.logo img {
  height: 50px;
}

<header>
  <div class="container">

    <div class="brand">
      <h1>Site</h1>

    </div>

    <div class="logo">
      <img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
    </div>

    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </div>

</header>

score 3 · Accepted Answer · answered Jan 29 '21 at 07:15

flex is being applied to the direct children of header. When you add the container div, it'll apply to that but not to any of its children. To achieve what you're looking for, move the flex rules to container instead of header.

html,
body {
  margin: 0;
  padding: 0;
  background-color: #24252A;
  color: white;
  height: 100%;
}

header {
  background: gray;
}

.container {
  display: flex;
  justify-content: space-between;
  width: 80%;
  margin: 0 auto;
}

.logo img {
  height: 50px;
}

<body>

  <header>
    <div class="container">

      <div class="brand">
        <h1>Site</h1>

      </div>

      <div class="logo">
        <img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
      </div>

      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </div>

  </header>


</body>

Adding container div removes flexbox

1 Answers1