CSS - White space in UL / LI

Question

Even if I set my margin-left and margin-right to 0, I still have white spaces on both sides of my <li> item.

Here is my CSS (jsfiddle link at the bottom)

ul.pill {
    list-style: none;
    list-style-type:none;
    list-style-position:initial;
    margin:auto;
}
ul.pill li {     
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background-color:lime;
    border-left: 1px solid navy;
    border-right: 1px solid navy;
    color: black;
    display:inline-block;
    font-size: 14pt;
    height: 50px;
    margin-left: 0px;
    margin-right: 0px ;
    margin:0;
    padding-left: 30px;
    padding-right: 30px;
}

ul.pill li:first-child {
    border: none;
    -moz-border-radius-topleft: 20px;
    -moz-border-radius-bottomleft: 20px;   
    -webkit-border-top-left-radius: 20px;
    -webkit-border-bottom-left-radius: 20px;     
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

ul.pill li:last-child {
    border: none;
    -moz-border-radius-topright: 20px;
    -moz-border-radius-bottomright: 20px;   
    -webkit-border-top-right-radius: 20px;
    -webkit-border-bottom-right-radius: 20px;   
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

Please see here: http://jsfiddle.net/epxgo34s/

Any thoughts on how to close the whitespace gap?