Hey there, I'm struggling with a pesky little gap that's sneaking in between an image and my navigation bar. I've exhausted all my usual tricks like setting inline-blocks on the ul and li levels, and trying to align everything left with text-align, but nothing seems to budge those hyperlinks to the far left edge of the div. It's a head-scratcher because there's some padding involved, but it shouldn't be creating such a noticeable gap.
Take a look at the html code here:
<div id = "header">
<img src ="img.png"/>
<div id ="nav_bar">
<ul class="nav">
<li class= "nav"><a href="#">Home</a></li>
<li class= "nav"><a href="#">Our Products</a></li>
<li class= "nav"><a href="#">Categories</a></li>
<li class= "nav"><a href="#">About Us</a></li>
<li class= "nav"><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
If you want a visual aid, check out this jfiddle: http://jsfiddle.net/37VZb/1/
To clarify, the troublesome gap I'm referring to is that space between the right side of the image and the leftmost element of the nav bar.