Как уменьшить расстояние между навигационными ссылками 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 вы написали (включен в вашем вопросе), так как это неизбежно вызовет проблемы в разной ширины и на разных устройствах. Это довольно проблематично.

Вместо этого попробуйте использовать следующий 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; 
    } 
}