How can i center the buttons in my navigation bar? - css

Question

<div id="navbar">
<ul>
<li id="nav">
Home
</li>
<li id="nav">
HTML/CSS
</li>
<li id="nav">
PHP/MySQL
</li>
<li id="nav">
Contact
</li>
</ul>
</div>
This is all the html i'm currently using for my navigation bar. The CSS is:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top: -26px;
}
I can not get the buttons to stay in the center. I've tried display: block inline and block-inline and none of those work like when other people use them. It currently looks like this:
http://i.gyazo.com/ad8ca7626594348dc1141bcbea8079d2.png
I'd like a little bit of space between the buttons but that should be easy with some margins.

Answer 1

Try this:
<style>
html, body{
padding: 0;
margin: 0;
}
#navbar {
background: rgba(125, 125, 125, 0.5);
width: auto;
height: 40px;
text-align: center;
}
li#nav:hover {
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
list-style-type: none;
display: block;
padding: 0;
margin: 0;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
display: inline-block;
padding: 10px;
}
</style>
<div id="navbar">
<ul>
<li id="nav">Home</li>
<li id="nav">HTML/CSS</li>
<li id="nav">PHP/MySQL</li>
<li id="nav">Contact</li>
</ul>
</div>
Check it out here: jsFiddle

Answer 2

Try the following css:
#bar {
height: 3px;
width: auto;
background: rgb(100,100,100);
margin-left: -10px;
margin-right: -10px;
}
#navbar {
background: rgba(125,125,125,0.5);
width: auto;
height: 20px;
padding: 10px;
padding-left: 80px;
margin: -10px;
}
li#nav:hover{
background: blue;
cursor: pointer;
box-shadow: 0px 0px 10px #FFFFFF;
}
ul {
margin: 0 auto;
}
li#nav {
width: 100px;
height: 20px;
background: black;
color: white;
text-align: center;
float: left;
padding: 10px;
margin-top:-10px;
}
Here is the example.