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;
}

user_11389581 · Answer

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;
}

user_13027687 · Answer

#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

CSS Justify-Content: Flex-End Not Working

2 Answers