Why is text not center aligning in navigation bar (CSS)? - html

Question

For some reason each bit of text in the navigation bars are aligning to the right. Is there any way to change this so it goes into the center of each part of the navigation menu? If somebody knows how to do this can you please help out because I am completely stumped.
HTML:
<div id="links">
<nav>
ul>
<li>Students
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
<li>Teachers
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Events
<ul>
<li>Search</li>
<li>Delete</li>
</ul>
</li>
<li>Nametag
<li>SignUp</li>
<li>Gallery
</ul>
CSS:
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links a{
margin:25px;
width:10px;
height: 0px;
font-size: 20px;
margin-top: 3px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 10px 40px;
color: #FFFFFF; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
width: 140px;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 0px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #A3A3A3;
}

Answer 1

Your anchors are fixed width, but not wide enough to hold the text. Consequently, it overflows out to the right.

Answer 2

add this css
#links{
text-align: center;
margin-bottom: 20px;
margin-right: 100px;
margin-left: 100px;
background-color:#7A7A99;
padding-bottom: 2px;
padding-right: 50px;
padding-left: 50px;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
#links > a{
padding:10px;
font-size: 20px;
}
nav ul {
background: #A3A3A3;
background: linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -moz-linear-gradient(top, #A3A3A3 0%, #666666 100%);
background: -webkit-linear-gradient(top, #A3A3A3 0%,#666666 100%);
box-shadow: 10px 6px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 8px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav > ul > li {
float: left;
text-align: center;
}
nav ul li:hover {
background: #A3A3A3;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav > ul > li > a{
display: block;
padding: 10px 15px;
color: #FFFFFF; text-decoration: none;
font-size:20px;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 10px 20px;
color: #fff;
display:block;
text-decoration:none;
}
nav ul ul li a:hover {
background: #A3A3A3;
}
EXAMPLE