HTML & CSS "Display: flex;" is not working

[Growlypw]

.nav ul {
    display: flex;
    
}

CSS


HTML

 <div class="nav">
        <div class="container flexbox">
            <h1 class="logo">Dragon ball Legends</h1>
        <nav>
            <ul><li><a href="index.html">Home</a></li></ul>
            <ul>
                <li><a href="features.html">Features</a></li>
            </ul>
            <ul>
                <li><a href="docs.html">Docs</a></li>
            </ul>
         </nav>
        </div>
    </div>

The ULs don't go in horizontal even though I copied exactly what the tutor said.

 

[Johna]

Hmm, I'm not sure each <li> should go in it's own <ul>.
Try this:

<div class="nav">
  <div class="container flexbox">
    <h1 class="logo">Dragon ball Legends</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="docs.html">Docs</a></li>
      </ul>
    </nav>
  </div>
</div>

Also I don't think it's the display: flex; that makes it horizontal, try adding float: left;:

.nav ul {
  display: flex;
  float: left;
}

 

[Growlypw]

Hmm, I'm not sure each <li> should go in it's own <ul>.
Try this:

<div class="nav">
  <div class="container flexbox">
    <h1 class="logo">Dragon ball Legends</h1>
    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="features.html">Features</a></li>
        <li><a href="docs.html">Docs</a></li>
      </ul>
    </nav>
  </div>
</div>

Also I don't think it's the display: flex; that makes it horizontal, try adding float: left;:

.nav ul {
  display: flex;
  float: left;
}

It worked, can you tell me why " Display:flex;" doesn't work?

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

15:00 Traversy Media didn't do float:left and did the other and it worked.

Thank you

 

[Johna]

Hmm, I'm not sure how he did it, maybe because of the justify-content: space-between;.