Navbar list display:flex does not flex

Question

I want to align the navbar list horizontally so used flex-direction: row code but it doesn't work maybe I think the tag select is wrong so I tried changed it to .nav-list ul, .nav-list ul li

But it doesn't flex

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  background: rgb(114, 209, 209);
}

.nav-logo {
  font-size: 1rem;
  color: #fff;
}

.nav-logo i {
  color: yellow;
}

.nav-list {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: #fff;
}

.nav-list ul {
  list-style: none;
}

.icons {
  padding: 50em;
}

<div class="navbar">
  <div class="nav-logo">
    <h1><i class="fab fa-accusoft"></i>Azure Coding</h1>
  </div>
  <div class="nav-list">
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>plan</a></li>
      <li><a>FAQ</a></li>
    </ul>
  </div>
  <div class="nav-icons">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

dippas · Accepted Answer · 2021-12-25T13:19:08.410

You need to move those rules from .nav-list to .nav-list ul because display: flex works in parent only

* {
  margin: 0;
  padding: 0;
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(114, 209, 209);
}

.nav-logo {
  font-size: 1rem;
  color: #fff;
}

.nav-logo i {
  color: yellow;
}

.nav-list ul {
  display: flex;
  justify-content: space-around;
  color: #fff;
  list-style: none;
}

.icons {
  padding: 50em;
}

<div class="navbar">
  <div class="nav-logo">
    <h1><i class="fab fa-accusoft"></i>Azure Coding</h1>
  </div>
  <div class="nav-list">
    <ul>
      <li><a>Home</a></li>
      <li><a>About</a></li>
      <li><a>plan</a></li>
      <li><a>FAQ</a></li>
    </ul>
  </div>
  <div class="nav-icons">
    <i class="fab fa-facebook"></i>
    <i class="fab fa-instagram"></i>
  </div>
</div>

score 0 · Answer 2 · answered Dec 25 '21 at 13:13

0

There is only one child in nav-list which is ul, you need to give display:flex to ul

.nav-list ul{ display:flex; } This should do the trick

answered Dec 25 '21 at 13:13

Vrijesh Rathod

13
3

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 25 '21 at 13:21

Navbar list display:flex does not flex

2 Answers2