CSS - UL / LI中的空格

Question

即使我将margin-left和margin-right设置为0，我的<li>项目的两边仍然有空格。

这是我的CSS（底部的jsfiddle链接）

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;
}

请看这里：     http://jsfiddle.net/epxgo34s/

关于如何消除空白差距的任何想法？