Trying to understand Justify content in CSS in my react code. I tried using the justify content: space between but it is not working

Question

`//My HTML code
<div>
<div className="picbot">PicBot</div>

<ul className="navbarlist">
<li>Overview</li>`your text`
<li>Examples</li>
<li>Tour</li>
<li>Blog</li>
<li>Help</li>
</ul>
            
<button className="download">Download</button>
</div>`

// My CSS code
.navbarlist {
list-style: none;
display: inline-flex;
flex-direction: row;
color: rgb(192, 190, 190);
font-size: 18px;
font-weight: 600;
justify-content: space-between;

}

I applied the justify content: space between on the ul tag with className of .navbarlist expected the items on the list to space out evenly but they don't (I use className instead of class in the html because it is written in jsx)

Answer 1

They are spaced evenly, there's just no additional space for them to occupy. So they evenly have no space in between them. Inline elements (including inline-flex) don't automatically expand to the width of their containers.

You can make the entire <ul> take up the width of its container by changing inline-flex to flex, for example:

.navbarlist {
  list-style: none;
  display: flex;  // <-- here
  flex-direction: row;
  color: rgb(192, 190, 190);
  font-size: 18px;
  font-weight: 600;
  justify-content: space-between;
}

<div>
  <div class="picbot">PicBot</div>
  <ul class="navbarlist">
    <li>Overview</li>
    <li>Examples</li>
    <li>Tour</li>
   <li>Blog</li>
   <li>Help</li>
  </ul>
  <button class="download">Download</button>
</div>