After working on my navbar and utilizing this site for guidance, I was able to center it using text align. However, there is an odd indent in the navbar that I can't seem to figure out. This indentation throws off the alignment when centered, giving it an awkward appearance.
Any tips on removing this mysterious indent and properly centering the navbar? I'm fairly new to this, so any advice would be greatly appreciated. Thank you!
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li><a href="#" class="noBorder leftedge">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Challenges</a></li>
<li><a href="#">Progress</a></li>
<li><a href="#" class="rightedge">Forum</a></li>
</ul>
</div>
</div>
CSS
*{
margin:0;
}
.links_container {
width: 100%;
height: 25px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
position: absolute;
max-width: 1000px;
}
.nav1 {
display: inline;
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 25px;
width: 100px;
text-align: center;
line-height: 25px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}