left padding on anchor tag

Question

i have a jsfiddle below with an example of my links displayed in a in-line block, what i don't understand is why is there some sort of padding or margin at the start of every anchor tag, maybe someone could help me out, i am not sure if i have missed something but i just cant seem to find out why that padding is there?

This is the html code:

 <div class="wrapper">
   <header class="main-header">
            <h1>blah blah blah</h1>
            <nav class="main-nav">
                <ul class="main-nav-links">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Get a Quote</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

This is all the css code:

.wrapper {
    width: 100%;
    min-width: 960px;
}

.main-header {
    position: relative;
    width: 100%;    
    height: 60px;
    background-color: #41a2cd;
}

.main-header > h1{
    float: left;
    margin: 11px 0 0 5px;
    color: #073a4f;
}

.main-nav-links > li {
    list-style: none;
    display: inline-block;
}

.main-nav-links li > a {
    text-decoration: none;
    display: block;
    color: #073a4f;
}

.main-nav-links > li {
    border-right: 1px solid #45b1e1;
}

.main-nav-links li > a:hover {
    background-color: #ffffff;
    /*background-color: #50bae8;*/
}

http://jsfiddle.net/pDvZt/

Answer 1

When you use display: inline-block; it will leave 4px spacing between the elements, so you need to use margin-left: -4px; or consider using float instead.

Demo (Using margin-left: -4px;)

.main-nav-links > li {
    list-style: none;
    display: inline-block;
    margin-left: -4px;
}

Demo 2 (Using float property)

.main-nav-links > li {
   list-style: none;
   float: left;
}

Note: Don't forget to clear your floating elements if you use float: left; for li property.

---

Edit: I would like to specify that inorder to prevent this behavior you can also modify your markup(if you've access to it) than you can line up your li elements so that white space between the elements won't be there anymore, for example

<ul>
   <li></li><li></li><li></li><li></li>
</ul>