我有点新的这些，但我已经成功地使我的全屏标题，它似乎是工作正常，问题是，每当我添加任何内容低于我的标题，它只是使整个页面（？），或标题有一个稍大的宽度，这是由于下面的水平滚动条。
我的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 */

个字符
我尝试了其他的解决方案，对我来说有同样的问题，但它似乎不工作。我似乎发现，将窗口缩小到一个较小的宽度修复它，但全屏窗口的问题发生。还发现，删除我的头使其他内容正常，没有正确的溢出，也保持头只使没有溢出。