如何减少导航链接CSS之间的间距

Question

所以这里是我的问题......如此接近完成一些css，问题在于缩小系列之间的空间＆＃39;和＆＃39;投资组合＆＃39;在我的Squarespace网站上。只留下一件小事!!我附上了一张照片......任何想法如何？

非常感谢提前！

编辑：

这是我在自定义CSS框中的完整代码。

＆＃13;

＆＃13;

#header #logoWrapper, 
 #header #siteTitleWrapper { 
     position: relative; 
     left: 15%; 
     -webkit-transform: translate(-50%,0); 
     -moz-transform: translate(-50%,0); 
     -ms-transform: translate(-50%,0); 
     -o-transform: translate(-50%,0); 
     transform: translate(-50%,0); 
     text-align: right !important;
 }#sitetitle { text-align: left }

 #header #mainNavWrapper .index { 
     margin: 0 0 0 100px !important; 
     text-align: left !important;
 }

＆＃13;

＆＃13;

＆＃13;

Answer 1

首先，我会删除您编写的CSS（包含在您的问题中），因为它必然会导致不同宽度和不同设备上的问题。这很成问题。

相反，请尝试使用以下CSS，它最低限度地覆盖Squarespace的默认规则，易于调整，不会影响移动导航，并且应该在不同平台上更稳定。

/*Media query prevents messing up mobile nav.*/
@media only screen and (min-width: 769px) {
    #header {
        padding-left: 10%;
        /*Adjust this as desired. Default is 30px, but looks like you have more than that in your screenshot.*/
    }
    #headerNav {
        margin-left: 6% !important;
        /*Adjust as desired. Going more than this may result in wrapped nav at ~750px.*/
    }
    #header #logoWrapper,
    #header #siteTitleWrapper {
        display: inline-block;
        position: static;
        transform: none;
        text-align: left;
    }
    #header #logoWrapper,
    #header #siteTitleWrapper,
    #header #headerNav {
        display: inline-block;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    .expand-homepage-index-links #headerNav .index.home,
    .expand-homepage-index-links #showOnScrollWrapper .index.home {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    #header .folder {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}