Having some trouble with the navbar on a project I'm currently working on. Struggling to achieve consistent padding for each link and maintain a fixed width for the navbar. Despite multiple attempts, I haven't been successful in achieving equal padding across all the links. The goal is to be able to easily add or remove links without having to constantly adjust the padding values. The code snippet below shows what I've attempted so far. Any assistance would be highly appreciated as I've spent quite some time searching for a solution to no avail. Apologies if this question has been asked before. Thank you.
HTML:
<div class="navbar">
<ul>
<li class="navbar-active"><a href="home.php">Home</a></li>
<li ><a href="about.php">About</a></li>
<li ><a href="registration.php">Registration</a></li>
<li ><a href="attendees.php">Attendees</a></li>
<li ><a href="schedule.php">Schedule</a></li>
<li ><a href="faq.php">FAQ</a></li>
<li ><a href="speakers.php">Speakers</a></li>
<li ><a href="photos.php">Photos</a></li>
<li ><a href="contact.php">Contact</a></li>
</ul>
</div><!-- /.navbar -->CSS:
/**
* Navbar
*/
div.navbar{
width:1000px;
background-color: #E15532;
text-transform: uppercase;
height: 30px;
line-height: 30px;
}
div.navbar ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
div.navbar ul li{
float: left;
}
div.navbar ul li a{
display: inline-block;
margin: 0;
padding: 0;
font-weight: bold;
text-decoration: none;
color: #F7F6E2;
border-right: 1px solid #AF4128;
border-left: 1px solid #AF4128;
border-bottom: 1px solid #AF4128;
padding: 0 16.67188px;
text-align: center;
}
div.navbar ul li a:hover{
background-color: #AF4128;
}