html - 无论单词大小如何，导航栏中的元素之间如何保持适当的间距？

我对CSS和网站设计本身有点陌生。
我正在创建一个网站，到目前为止，我只了解它的导航栏，其中包括“主页”，“联系我们”等按钮。
到现在为止，我直到他们每个人都垂直对齐中心并具有文本对齐的中心。但是我什至在经过几次搜索后仍然不明白，当我有占所有内容的百分比的宽度并且什么都没有固定时，如何获得正确的间距。 （这样做是为了使网页以不同的分辨率动态更改）



如您所见，HOME与左侧之间的间距正确，并且您发现Committees和RESOURCES之间的间隙太小。同样，重要的是CONTACT US的左侧空间太小。

这是JSFiddle：JSFiddle

此外，如果它们都局促不整，以查看更改，请在JSFiddle上缩小到50％。

最佳答案

.nb_item
{
    display:inline-block;
    width:auto;
  padding:0px 10px;
    color:#FFFFFF;
    margin:auto;
    text-align:center;
}

不用给出12.5％的宽度，而是给出width：auto，然后添加一个填充。就抽筋而言，您需要使用媒体查询，
如果宽度小于特定宽度，则需要将其显示为下拉列表而不是导航栏。