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