css - 方形空间中导航栏的填充

Question

我正在构建一个带有方形空间的网站，但顶部导航栏与同一行上的 Logo /主标题距离太远时遇到了一些问题。

所以这个想法缩小了导航栏和 Logo 之间的差距(假设​​从左上角和右上角填充 30%) squarespace

我发现这里要使用的 css 但我不太确定要使用哪个“id”

.navbar-nav > li{
  padding-left:30%;
  padding-right:30%;
}

来自检查员，我有点困惑，非常感谢您的帮助!

这里的网站链接可以看到代码:https://handa-cheng-a3wm.squarespace.com/1starrondissement

和代码:

<div class="Header-inner Header-inner--top" data-nc-group="top">
  <div data-nc-container="top-left">
    <nav class="Header-nav Header-nav--primary sqs-frontend-overlay-editor-widget-host" data-nc-element="primary-nav" data-content-field="navigation" id="yui_3_17_2_3_1466525273564_799">
      <div class="Header-nav-inner" id="yui_3_17_2_3_1466525273564_2568">
        <a href="/see-paris/" class="Header-nav-item">看巴黎</a><a href="/listen-paris/" class="Header-nav-item" id="yui_3_17_2_3_1466525273564_2567">听巴黎</a>
      </div>
    </nav>
  </div>
  <div data-nc-container="top-center">
    <a href="/" class="Header-branding sqs-frontend-overlay-editor-widget-host" data-nc-element="branding" data-content-field="site-title">巴黎，Paris</a>
  </div>
  <div data-nc-container="top-right">
    <nav class="Header-nav Header-nav--secondary sqs-frontend-overlay-editor-widget-host" data-nc-element="secondary-nav" data-content-field="navigation" id="yui_3_17_2_3_1466525273564_811">
      <div class="Header-nav-inner">
        <a href="/about-us/" class="Header-nav-item">我们是谁？</a><a href="/contact-us/" class="Header-nav-item">联系我们</a>
      </div>
    </nav>
  </div>
</div>

Answer 1

将以下 CSS 添加到 CSS Editor会做你想做的事。

.Header-nav--primary {
  margin-left: auto;
  margin-right: 5%;
}

.Header-nav--secondary {
  margin-right: auto;
  margin-left: 5%;
}

您当然可以根据需要调整 5%。

有关 flex + margin here 的更多信息.