为什么我的导航栏导致我的页面在右侧有额外的 space？

Question

谁能帮我弄清楚为什么我的页面右侧有空白？

这让我发疯，我已经尝试了我能想到的一切。你可以明白我在说什么 here.

当我禁用溢出或设置 max-width: 100%;在导航或 body 上它破坏了我的粘性导航功能，我也不明白。有谁知道发生了什么事吗？

$(function () {
  $(document).scroll(function () {
    var $nav = $(".nav");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});

header {
  margin: auto;
  position: relative;
  text-align: center;
  justify-content: center;
  z-index: 222;
}

.navigation {
  margin: auto;
  position: relative;
}

nav, .nav {
  margin: auto;
  text-align: center;
  justify-content: center;
}

nav {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

.nav {
  margin-top: 13px;
  position: fixed;
  top: 0;
  width: 100%;
  min-height: 59px;
}

.nav.scrolled {
  margin-top: 0px !important;
  background: rgba(0, 0, 0, 0.59);
}

.nav li {
  margin: auto;
  margin-left: 8px;
  margin-right: 8px;
  text-align: center;
  line-height: 59px;
  list-style: none;
  color: #ffffff;
  display: inline-block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <div class="row">
      <div class="navigation">
        <nav>
          <ul class="nav">
            <li><a class="smoothscroll"  href="#home" title="">HOME</a></li>
            <li><a class="smoothscroll"  href="#beats" title="">BEATS</a></li>
            <li><a class="smoothscroll"  href="#licenses" title="">LICENSES</a></li>
            <li><a class="smoothscroll"  href="#videos" title="">VIDEOS</a></li>
            <li><a class="smoothscroll"  href="#services" title="">SERVICES</a></li>
            <li><a class="smoothscroll"  href="#contact" title="">CONTACT</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

Answer 1

嗯，我认为这与

有关

".row"：我认为您需要将“.container”添加到父元素，就像在关于 grid system 的 bootsrap 5 文档中一样
```
// quick way to demo
$('.row').parent().addClass('container')
```
transform: rotate(-8deg); 在 .home-content h1

Answer 2

您正在使用 bootstrap。根据布局 documentation，您的语义不正确。您应该遵循如下所示的布局。

注意结构“容器”>“行”>“列”

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

为什么我的导航栏导致我的页面在右侧有额外的 space？

Why is my navbar causing my page to have extra space on the right side?

html

javascript

css

navigation

jquery