我有一个固定的标题，它与下面的内容重叠。
我已经尝试将padding-top / margin-top添加到body，page-wrapper和about section，但没有运气。我在标题内使用了一个内部柔性盒div，我有一个隐藏的侧边栏，活动时有100％的高度。我有一个主页，其高度为100vh的英雄形象和9rem的填充顶部似乎有效，但我不打算在这个特定的页面上使用英雄形象。
HTML：
<body>
<div class="page-wrapper content">
<!-- HEADER -->
<header id="header">
<div class="header-inner">
<div class="header-col header-col-1">
<div class="menu-trigger">
<span class="menu-trigger-icon">
<span class="menu-trigger-bar menu-trigger-bar-top"></span>
<span class="menu-trigger-bar menu-trigger-bar-middle"></span>
<span class="menu-trigger-bar menu-trigger-bar-bottom"></span>
</span>
<span class="menu-trigger-title">Menu</span>
</div>
</div>
<div class="header-col header-col-2">
<a class="logo" href="../index.html">
<img src="" alt="">
</a>
</div>
<div class="header-col header-col-3">
<a class="click-to-call" href="tel:+44-1492-877-832">
<i class="fas fa-phone"></i>
</a>
<a class="btn-book-now" href="">Book Now</a>
</div>
</div>
</header>
<!-- END / HEADER -->
<!-- SIDE NAV -->
<nav class="side-nav">
<div class="side-nav-inner">
<ul class="main-menu">
<li>
<a href="../index.html">Home</a>
</li>
<li>
<a href="about.html">About Us</a>
</li>
<li>
<a href="rooms.html">Rooms</a>
</li>
<li>
<a href="contact.html">Contact Us</a>
</li>
<li>
<a href="">Book Now</a>
</li>
</ul>
<ul class="social-media">
<li>
<a href="">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</nav>
<!-- END / SIDE NAV -->
<main id="main">
<section class="about">
<div class="about-inner">
<h1>About Us</h1>
<span class="hr"></span>
CSS：
#header {
background: #fdd400;
-webkit-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 .2rem .9rem 0 rgba(0, 0, 0, 0.2);
left: 0;
position: fixed;
right: 0;
top: 0;
width: 100%;
z-index: 99;
}
.header-inner {
display: flex;
flex-direction: row;
height: 9rem;
margin: 0 6%;
}
#main {
background: #fff;
width: 100%;
}
.about {
background: #fff;
width: 100%;
}
.about-inner {
align-items: center;
color: #2c2a29;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 6%;
padding: 6rem 0;
text-align: center;
padding-top上的#main除其他外应该起作用，除非其他CSS在某处干扰，否则你无法预测标题的高度。
我尝试根据您粘贴的内容在代码沙箱中重新创建项目，以了解问题所在。我认为有一些样式缺失，但似乎至少你想要实现的是通过将主要和侧边栏div包装在内容div中，然后向下移动它。像这样：
.content {
position: absolute;
top: 9rem;
display: flex;
width: 100%;
overflow: scroll;
}
还有其他方法可以解决这个问题，比如向内填充内容，但这也会产生一些副作用。
你可以看看这里：