为什么网页部分与 header 重叠，即使 header 的位置是固定的

Question

我将 header 的位置属性固定为固定的，但它不起作用。

当我在移动视图中向下滚动页面时，网页的部分与 header part.The 此代码中的主页部分工作正常，而关于部分工作不正常 manner.Inorder 使网页响应我已经在我的代码中添加了 css 和 js 文件，但它是此处未提及。

    <body>
    <header>
        <div class="row">
            <div class="col-3 col-md-6" id="logo">
                <a class="logo" href="#">Xyz<span>Abc</span></a>
            </div>
            <div class="col-9 col-md-6">
                 <nav class="navbar navbar-expand-lg navbar-light">
                     <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
                         <div class="navbar-nav">
                            <a class="nav-item nav-link" href="#">Home <span class="sr-only"> 
                            (current)</span></a>
                           
                         </div>
                     </div>
                 </nav>
            </div>
        </div>
    </header>
    <section class="home">
            <div class="row">
                <div class="col-12">
                    <h2>Hello,I'm Xyz Abc</h2><br>
                    <p>I am Developer</p><br>
                    <p>Let's start <span>Scrolling</span>  and know more <span>About Me.</span> </p>
                </div>
            </div>
    </section>
    <section class="about">
        <div class="container-fluid">
            <h3>About Me</h3>
            <div class="row">
                <div class="col-sm-5 col-12 bg-danger">
                     <img src="profile.jpg">
                </div>
                <div class="col-sm-7 col-12 bg-info">
                     <h5>I am Xyz Abc and I'm a <span>Developer</span></h5>
                </div>
            </div>
        </div>
    </section>
    </body>
    </html>

Css 页数：

        *{
        margin:0;
        padding:0;
        text-decoration:none;
        width:100%;
        }
        header{
        font-family:sans-serif;
        position:fixed;
        background-color:green;
        height:70px;
        width:100%;
        }
      .home{
      display:flex;
      background-image: url("a4.png");
      width:100%;
      height:100vh;
      padding-top:60px;
      }
      
    .about{
    padding-top:150px;
    width:100%;
    }
   .about .row {
    width:100%;
    }

Answer 1

您可以在 header 标签中使用引导程序 class fixed-top

<header class="fixed-top ">
.
.
.
</header>

为什么网页部分与 header 重叠，即使 header 的位置是固定的

Why section of web page overlaps the header even if the position of header is fixed

html

css

responsive-design

bootstrap-4