Nav Bar options on upper right in opposite position

Here is the code : https://codepen.io/bradrar1/pen/JBNNrX
Nav Bar in the upper right is the other way around.

My html specifically says:

  
   <nav>
       <ul>
           <li>Features</li>
           <li>How it Works</li>
           <li>Pricing</li>
       </ul>
   </nav>

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

Help.

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: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

Try this:

li{
display:inline;
}
#nav-bar{
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 {
  margin:0;
  padding:0;
}

#header-img {
 max-height:100%;
}

#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;
}
1 Like

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