Flexbox not filling width

Question

I'm currently trying to create a header using flexbox. However, I'm trying to align two containers to the far left, and one div to the far right, but it doesn't seem like the flexbox container is filling 100% of the width. This causes problems, since I cant push the div all the way to the right. How do I fix this?

header {
  width: 100%;
  display: flex;
  flex-direction: row;
}

header .header-sm {
  justify-content: right;
}

header .logo {
  justify-content: left;
}

header nav {
  justify-content: left;
}

<header>
  <div class="logo"></div>
  <nav></nav>
  <div class="header-sm"></div>
</header>

Thank you for your help!

jeremy-denis · Answer 1 · 2022-07-05T13:51:30.923

justify-content can only be placed at the flex container level

but in your case if you want to align a specific item to the right of the container you can play with margin-left: auto

header {
    width: 100%;
    display: flex;
    flex-direction: row;
    background: red;
}

header * {
  margin: 5px;
  border: solid 1px blue;
}

header .header-sm {
    margin-left: auto
}

<header>
   <div class="logo">test</div>
   <nav>test</nav>
   <div class="header-sm">test</div>
</header>

Flexbox not filling width

1 Answers1