Bootstrap navbar hide content on #link - html

Question

I have a problem with the navbar-fixed-top item. It hides content form the container.
This is a common problem solved by adding the following css code :
body { padding-top: 70px; }
Now, when I load my page, the container is not hidden by the navbar anymore. The problem is when I want to go to a specific item in the page with a href=#item. In this case, the item is always hidden by the navbar.
I have created a simple code on Codeply which shows this problem. In this example, when I click on "Got to test3", the item <h2 class="font-weight-light">TEST3</h2> is hidden by the navbar.
Here is the code below :
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
HELLO NAVBAR
</nav>
<div class="container py-2">
<div class="row">
<div class="col">
<div class="sidebar-sticky" id="menu">
<ul class="nav flex-column">
<li class="nav-item">
Go to test1
</li>
<li class="nav-item">
Go to test2
</li>
<li class="nav-item">
Go to test3
</li>
<li class="nav-item">
Go to test4
</li>
</ul>
</div>
</div>
<div class="col">
<div id="test">
<h2 class="font-weight-light">TEST1</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test2">
<h2 class="font-weight-light">TEST2</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test3">
<h2 class="font-weight-light">TEST3</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
<div id="test4">
<h2 class="font-weight-light">TEST4</h2>
<p>
This is a Bootstrap starter example snippet.
</p>
<br/><br/><br/><br/><br/>
</div>
</div>
</div>
</div>

Answer 1

Here's the solution
body {
padding-top: 70px;
}
#test{
padding-top:90px;
}
#test2{
padding-top:90px;
}
#test3{
padding-top:90px;
}
#test4{
padding-top:90px;
}

Answer 2

For the current case, you could add the padding to the div elements which have a h2 following them (such as "Test3"). Adding div h2 { padding-top: 70px; } does that for your current structure. However, in order to not depend on the h2 following a div as you further develop your project, you could also create an own class to which the padding-top-rule applies, and add it to those elements for which it is needed.
Hope that helps.

Answer 3

From the question Fixed page header overlaps in-page anchors, the solution is not the accepted answer but is in the answers. So I'll repeat it here.
I have add this class in the css file :
.hreflink::before {
content: "";
display: block;
height: 70px; /* fixed header height*/
margin: -70px 0 0; /* negative fixed header height */
}
and then I have define every element I want to go to with this class, for example :
<div id="test3" class="hreflink">