我对这些有点陌生，但我已经成功制作了全屏标题，并且似乎工作正常，问题是每当我在标题下方添加任何内容时，它只会使整个页面（？）或标题具有宽度稍大，导致下方出现水平滚动条。
我的html：
<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>
我的CSS：
*,
*::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 */
我尝试了其他对我有同样问题的解决方案，但它似乎不起作用。我似乎还发现，将窗口大小调整为较小的宽度可以修复它，但全屏窗口会出现问题。还发现删除我的标题使其他内容正常并且没有正确的溢出，并且保留标题仅不会溢出。
将
heightheaderheader {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}