CSS Justify-Content: Flex-End Not Working

Question

I am making a GitHub homepage clone with HTML and CSS before I move on to JS. I'm currently on the navigation bar and I'm having some trouble with the bell icon, plus sign icon, and profile image icon on the right. However, it's stuck in the center. Any help would be greatly appreciated!

#nav-bar {
    background-color: black;
    height: 53px;
    display: flex;
    align-items: center;
}

#profile-nav-bar {
    color: white;
    list-style: none;
    display: flex;
}

#profile-nav-bar li {
    justify-content: flex-end;
}

<body>
    <nav id="nav-bar">
        <ul id="profile-nav-bar">
            <li>
                <i class="far fa-bell"></i>            
            </li>
            <li>
                +
            </li>
            <li>
                <i class="fas fa-sort-down"></i>
            </li>
            <li>
                <i class="far fa-user"></i>
            </li>
            <li>
                <i class="fas fa-sort-down"></i>
            </li>
        </ul>
    </nav>
</body>

Tanner Dolby · Accepted Answer · 2020-06-26T02:21:11.713

The align-items property for #nav-bar is what I removed, then specified positioning along the two flexbox axes for the #profile-nav-bar container. CSS Flexbox

#nav-bar {
    background-color: black;
    height: 53px;
    display: flex;
}

#profile-nav-bar {
    width: 100%;
    color: white;
    list-style: none;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

#profile-nav-bar li {
    margin-right: 5px;
}

<html>
  <body>
      <nav id="nav-bar">
          <ul id="profile-nav-bar">
              <li>
                  <i class="far fa-bell"></i>            
              </li>
              <li>
                +
              </li>
              <li>
                  <i class="fas fa-sort-down"></i>
              </li>
              <li>
                  <i class="far fa-user"></i>
              </li>
              <li>
                  <i class="fas fa-sort-down"></i>
              </li>
          </ul>
      </nav>
      <!-- Font awesome -->
      <script src="https://kit.fontawesome.com/e03d7ac5cf.js" crossorigin="anonymous"></script>
  </body>
</html>

I did exactly what you said, and it worked! However, I played around with your solution, and it turns out that as long as I added `width: 100%` before `#profile-nav-bar` it would work. Thanks for the help! I spent so much time on this lol. — , Jun 26 '20 at 02:35
@JoshuaLiu No problem. Feel free to upvote my answer if it helped! — Tanner Dolby, Jun 26 '20 at 02:40

score 0 · Answer 2 · answered Jun 26 '20 at 02:05

#nav-bar { align-items: center;} this could be why its stuck in the center

I believe it should be the UL that is justified Flex-end

 <nav id="nav-bar">
    <ul id="profile-nav-bar">
        <li>
            <i class="far fa-bell"></i>            
        </li>
        <li>
            +
        </li>
       </ul>
       <ul>
        <li>
            <i class="fas fa-sort-down"></i>
        </li>
        <li>
            <i class="far fa-user"></i>
        </li>
        <li>
            <i class="fas fa-sort-down"></i>
        </li>
    </ul>
</nav>

CSS Justify-Content: Flex-End Not Working

2 Answers2