=================================
My webpage acts like a homepage on the web. The issue arises when clicking on a new link, as my navbar is fixed and covers the section heading. I need the page to display the section heading properly even after clicking on a new link. Here's an example of the desired behavior: [link][/1]: https://i.sstatic.net/QeB1Z.png [Navbar remains fixed][2] even when a new link is clicked. In contrast, here is the current problem image: [img][/1]: https://i.sstatic.net/tpNEi.png Any help with resolving this issue would be greatly appreciated. I am seeking a solution using only HTML, CSS and JavaScript
**CSS Code**
* {
margin: 0;
padding: 0;
}
.nav {
width: 100%;
height: 100px;
position: fixed;
background-color: red;
}
.section {
background-color: green;
height: 200px;
}
.section1 {
background-color: yellow;
height: 900px;
}
.section2 {
background-color: blue;
height: 900px;
transition: .5s;
}**HTML Code**
<div class="nav">
<a href="#main" style="font-size: 3rem;">new</a>
</div>
<div>
<div class="section">
</div>
<div class="section1">
</div>
<div class="section2" id="main">
<h1>section</h1>
</div>
</div>
<script>
</script>
</body>
</html>