My attempt at fixing the position property of the header as fixed has not been successful. When I scroll down the page in mobile view, the section part of the webpage overlaps the header part. The home section in this code functions properly, but the About section is not displaying correctly. I have already included CSS and JS files to make the webpage responsive, although it is not explicitly mentioned here.
<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 Page:
*{
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%;
}