I have been struggling to center the buttons on my navigation bar for quite some time now, despite my efforts searching through Google (I'm still a beginner in CSS).
Below is the code I have for the navbar (excluding my numerous unsuccessful attempts).
CSS:
#navigation
{
list-style-type: none;
background: #222222;
overflow: hidden;
width: 1150px;
margin: 0;
padding: 0;
display:inline-block;
margin-left: 0 auto;
margin-right: 0 auto;
}
#navigation li
{
border-right: solid 1px #ca0002;
height: 35px;
display: inline-block;
margin: 0 auto;
}
#navigation li a:link, #navigation li a:visited
{
text-decoration: none;
display: block;
height: 35px;
color: #fff;
line-height: 35px;
padding: 0 20px 0 20px;
border-right: solid 1px #990000;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
}
#navigation li a:hover
{
background: #990000;
color: #fff;
}
#navigation li.first
{
border-left: solid 1px #ca0002;
}