`justify-content` property not working on nested flexbox

Question

I'm quite new to HTML and CSS and I've encountered a problem with the menu I'm currently coding.

I'd like to make a menu using nesting flexbox. It's getting close to what I want but for a reason I cannot understand, the justify-content inside the children flexbox doesn't seem to apply...

Here is my code :

header {
  display: inline-flex;
  height: 90px;
  align-items: center;
  justify-content: flex-start;
}
.avatar {
  display: inline-flex;
  height: inherit;
  width: 200px;
  background-color: #00D717;
  align-items: center;
  justify-content: space-around;
}
.avatar h1 {
  font-size: 13px;
  text-transform: uppercase;
  color: white;
}
.resteHeader {
  display: inline-flex;
  height: inherit;
  justify-content: flex-start;
  align-items: center;
}
.resteHeader nav {
  display: inline-flex;
  height: inherit;
  justify-content: space-around;
  align-items: center;
}
.resteHeader nav ul {
  display: inline-flex;
  height: inherit;
  justify-content: space-between;
  align-items: center;
}

<header>
  <div class="avatar">
    <img src="img/avatar.png">
    <h1>Hoang Nguyen</h1>
  </div>
  <div class="resteHeader">
    <nav>
      <ul>
        <li>
          <a href="#">
            <img src="img/silhouette.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/bulle.png" alt="">
          </a>
        </li>
        <li>
          <a href="#">
            <img src="img/cloche.png" alt="">
          </a>
        </li>
      </ul>
    </nav>
    <img class="logo" src="img/logo.png" alt="">
    <form>
      Type sor search
      <input type="text">
      <img src="img/loupe.png" alt="">
    </form>
  </div>
</header>

Thanks for your help !

Answer 1

The justify-content property in your code is working fine.

The problem is you're using display: inline-flex, which makes the flex container only as wide as the content, leaving justify-content with no extra space to distribute.

Try using display: flex or adding width: 100% to your rules.

header {
    display: inline-flex;
    height: 90px;
    align-items: center;
    /* justify-content: flex-start;    OFF FOR TESTING */
    justify-content: flex-end;         /* WORKING */
    width: 100%;
}

.avatar {
    display: inline-flex;
    height: inherit;
    width: 200px;
    background-color: #00D717;
    align-items: center; 
    /* justify-content: space-around;  OFF FOR TESTING */
    justify-content: flex-start;      /* WORKING */
}

.avatar h1 {
    font-size: 13px;
    text-transform: uppercase;
    color: white;
}

.resteHeader {
    display: inline-flex;
    height: inherit;
    align-items: center;
    /* justify-content: flex-start;  OFF FOR TESTING */
    justify-content: space-between;  /* WORKING */
    width: 100%;
}

.resteHeader nav {
    display: inline-flex;
    height: inherit;
    align-items: center;
    /* justify-content: space-around;  OFF FOR TESTING */
    justify-content: center;           /* WORKING */
    width: 100%;
}

.resteHeader nav ul {
    display: inline-flex;
    height: inherit;
    align-items: center;
    /* justify-content: space-between; OFF FOR TESTING */
    width: 100%;
}

<header>
    <div class="avatar">
        <img src="img/avatar.png">
        <h1>Hoang Nguyen</h1>
    </div>

    <div class="resteHeader">
        <nav>
            <ul>
                <li>
                    <a href="#"><img src="img/silhouette.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="img/bulle.png" alt=""></a>
                </li>
                <li>
                    <a href="#"><img src="img/cloche.png" alt=""></a>
                </li>
            </ul>
        </nav>

        <img class="logo" src="img/logo.png" alt="">

        <form>
            Type sor search
            <input type="text">
            <img src="img/loupe.png" alt="">
        </form>
    </div>
</header>

Answer 2

display:inline-flex means make your container behave like an inline element - i.e. only as wide as it needs to be.

It makes no sense to specify justify-content: space-around on a display:inline-flex container unless the container also has a width (which a lot of your display:inline-flex containers do not)