全屏页眉下方的内容使页眉/整页（？）略微向右溢出-解网

问：

我对这些有点陌生，但我已经成功地制作了我的全屏标题，它似乎工作正常，问题是每当我在标题下方添加任何内容时，它只会使整个页面（？），或者标题的宽度略大，这是由下面的水平滚动条引起的。

我的 HTML ：

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  background-color: rgb(30, 30, 30);
  display: flex;
  flex-direction: column;
  font-family: 'Quicksand';
  font-size: 14pt;
  font-weight: 500;
  color: white;
  position: relative;
  z-index: 1;
}

body :not(.banner-container) {
  z-index: 2;
}

header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

header .navbar-container {
  width: 100%;
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


header .navbar-container .website-logo img {
max-height: 2rem;
}

header .navbar-container .content-navigator ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  list-style-type: none;
  gap: 2rem;
}

header .navbar-container .content-navigator ul li a {
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s;
  color: white;
}


header .navbar-container .content-navigator ul li a:hover {
  opacity: 0.7;
}

header video {
  position: absolute;
  width: 100vw; 
  height: 100vh;
  object-fit: cover;
  object-position: 50% 50%;
  filter: brightness(40%);
  z-index: 0;
}

header .gradient-block-fade {
  width: 100vw;
  height: 100vh;
  position: absolute;
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(30, 30, 30, 1));
  z-index: 2;
}
/* other styling below */

<body>
  <header>
    <video autoplay loop muted>
      <source src="css/imgsrc/gameplay.mp4" type="video/mp4">
    </video>
    <div class="gradient-block-fade">
        <!-- div untuk gradient block-->
    </div>
    <div class="navbar-container">
      <div class="website-logo">
        <a href="#Home"><img src="css/imgsrc/osu-icon-placeholder.jpg" alt="" srcset=""></a>
      </div>
      <div class="content-navigator">
        <ul>
          <li><a href="#Search">Search</a></li>
          <li><a href="#Rankings">Rankings</a></li>
          <li><a href="#Forum">Forum</a></li>
          <li><a href="#Support">Support</a></li>
        </ul>
      </div>
    </div>
  </header>
    <!-- other content below -->
</body>

我尝试了其他人的解决方案，对我来说有同样的问题，但似乎不起作用。而且我似乎发现将窗口大小调整为较小的宽度可以修复它，但全屏窗口会出现问题。还发现删除我的标题会使其他内容正常并且不会右溢出，并且保留标题只会使内容不会溢出。

HTML CSS FlexBox 溢出宽度

全屏页眉下方的内容使页眉/整页（？）略微向右溢出

Content below full screen header makes the header/whole page(?) overflowing to the right slightly

评论