How can I move my navigation bar to a different place? - html

Question

I'm trying to make my nav bar be horizontal and centered. Right now, it's all smushed to the right of the website. How do I control where the bar is located?
Also, why can't I just have all my css under #nav (why do I need #nav ul li, etc?)
#nav{
width: 90%;
text-align: center;
font-size: 35px;
text-align: center;
}
#nav ul li{
display: inline;
height: 60px;
text-align: center;
}
#nav ul li a{
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>

Answer 1

You need the different css selectors because not all the styles are meant to be applied to the surrounding container #nav, but to certain elements inside it. With pure CSS, it is not possible to nest rules. If nesting is what you were asking for, take a look at LESS or SASS (DuckDuckGo is your friend).
Your list items were pushed a little to the right because that is the natural behaviour of list items unless you overwrite the responsible css attributes margin and / or padding (depending on the browser). So just reset both to 0 in your CSS for the list items.
#nav {
background-color: #e8e8e8;
width: 90%;
font-size: 35px;
text-align: center;
margin: 0 auto;
}
#nav ul {
display: inline-block;
white-space: nowrap;
margin: 0;
padding: 0;
}
#nav ul li {
display: inline;
text-align: center;
margin: 0;
padding: 0;
}
#nav ul li a {
padding: 40px;
background: #25ccc7;
color: white;
text-align: center;
}
<div id="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>