如何使导航栏具有相等的间距？

Question

我不知道如何正确地问这个问题，但我正在使用HTML和CSS的无序列表导航栏。

如下图所示，Home和About Us选项卡之间的间距与Contact Us和Get Involved之间的间距不同。我的导航栏

http://imgur.com/a/vIB2u

我的CSS代码是如下，

.nav { 
    width:898px; 
} 

.nav ul { 
    list-style: none; 
    text-align: center; 
    padding: 0; 
    margin: 0; 
} 

.nav li { 
    font-family: 'Roboto', sans-serif; 
    width: 149.6666666px; 
    border-bottom: none; 
    height: 106px; 
    line-height: 106px; 
    font-size: 14px; 
    display: inline-block; 
    float:left; 
    margin: 0 auto; 
} 

.nav a { 
    text-decoration: none; 
    color:#000000; 
    display: block; 
    transition: .3s background-color; 
} 

.nav a:hover { 
    background-color: #5c89c7; 
    color:#FFFFFF; 
} 

Answer 1

.nav li { 
    font-family: 'Roboto', sans-serif; 
    width: 149.6666666px; 
    border-bottom: none; 
    height: 106px; 
    line-height: 106px; 
    font-size: 14px; 
    display: inline-block; 
    float:left; 
    margin: 0 auto; 
} 

在上述造型，width属性是固定的。无论其内容如何，​​所有列表项目的宽度都是相同的。相反，摆脱宽度和玩填充。例如：

padding-right: 5px; 
padding-left: 5px; 

这将给所有列表元素之间10px的间距，尽管内容。