ナビゲーションリンク間のスペースを減らす方法CSS

Question

これは私の質問です...いくつかのCSSを終了するのに近いので、Squarespaceサイトの 'シリーズ'と 'ポートフォリオ'の間のスペースを閉じることに問題があります。ほんの少しのことが残った！私は写真を添付し​​た...任意のアイデアをどのように？

事前に感謝します！

EDIT：

これは私がカスタムCSSボックスを持っている全体のコードです。

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

Answer 1

まず異なる幅で、異なるデバイス上の問題を引き起こすことがバインドされていますように、私は、（あなたの質問に含まれる）あなたが書いたCSSを削除します。それはかなり問題です。

代わりに、Squarespaceのデフォルトルールを最小限にオーバーライドし、簡単に調整でき、モバイルナビゲーションに影響せず、異なるプラットフォーム間でより安定したCSSを使用してみてください。

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