Although this question has appeared before, I am facing an issue with a list displayed as an inline block for use as a navigation bar. My goal is to center the nav bar on the webpage and ensure it scales down appropriately.
<ul class="nav_bar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
This is the list along with the CSS I have implemented:
.nav_bar li{
display: inline-block;
list-style: none;
padding: 5px;
border: 1px solid black;
background-image:url(../hubheading.jpg);
background-repeat: repeat;
border-radius: 5px;
text-align: center;
width: 150px;
margin: 0 auto;
}
.nav_bar {
text-align: center;
margin: 0 auto;
}
The issue I am encountering is that the list appears slightly offset to the right. Various attempts have been made including wrapping the list in a div, but this seems to interfere with the CSS styling. As such, I am seeking assistance as I am open to using jQuery if it will resolve the problem effectively.