Nav Bar options on upper right in opposite position

Nav Bar options on upper right in opposite position


Here is the code :
Nav Bar in the upper right is the other way around.

My html specifically says:

           <li>How it Works</li>

but the result is:
Pricing How it Works Features

I noticed it has something to do with

#nav-bar li {
    float: right;

I tried removing float: right; and replaced it with text-align: right; but I am confused as to why this didn’t have any effect.

The end goal should be
Features How it Works Pricing


Edit(other minor problem): the background-color only changed around its container. How can I make it so that, the background-color also fills the height of Pricing, Features and How It Works . Just like in this example when someon hovers it:


Try this:

float: right;
margin-right: 50px;


This should keep the original order of the nav links, plus vertical center them.

/*navigation bar section */
#header {
    background-color: cadetblue;
    position: fixed;
    height: 80px;
    width: 100%;  
    top: 0;
    left: 0;
ul {

#header-img {

#nav-bar {
    float: right;

.nav-link a {
    list-style-type: none;
    text-decoration: none;
    color: white;

#nav-bar li {
    display: inline-block;
    margin-right: 50px;
    line-height: 80px;

#nav-bar li a:hover {
    background-color: cornflowerblue;


Okay, Thank you, I see that the float:right is now in the #nav-bar . Thanks again