So reduzieren Sie den Abstand zwischen Navigationslinks CSS

Question

Also hier ist meine Frage ... so kurz vor dem Abschluss einige CSS, ein Problem liegt darin, den Raum zwischen "Serien" und "Portfolios" auf meiner Squarespace-Website zu schließen. Nur noch eine Kleinigkeit !! Ich habe ein Foto beigefügt ... irgendwelche Ideen wie ??

Vielen Dank im Voraus!

EDIT:

Dies ist der gesamte Code, den ich in der benutzerdefinierten CSS-Box haben.

#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

Zuerst würde ich die CSS entfernen Sie schrieb (in Ihrer Frage enthalten), wie es gebunden ist Probleme auf verschiedenen Breiten und auf verschiedenen Geräten verursachen. Es ist ziemlich problematisch.

Versuchen Sie stattdessen, das folgende CSS zu verwenden, das die Standardregeln von Squarespace minimal überschreibt, leicht angepasst werden kann, die mobile Navigation nicht beeinflusst und auf verschiedenen Plattformen stabiler sein sollte.

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