Jump to anchored heading on page shows heading behind header

I'm using this type of page header:

<header id="header" class="full-header" data-sticky-class="not-dark">
<div id="header-wrap">
<div class="container">
<div class="header-row">
...

Then, I have some headings on a page with anchors, for example:

<h3 id="heading" class="text-uppercase lined mb-4">Heading</h3>
<p>Ipsum lorem...</p>

If I now link to an anchor on the same page, it jumps to that anchored heading, as expected, but the heading is displayed behind the page header instead of below it. That means that you see the text, but not the heading. How can I make sure that the anchored heading is shown below the header?

I haven't published these changes yet, so I don't have a live site to point to at the moment.

Thanks!
--Ron

...

Adding data-scrollto="#page-anchor" to the A tag worked brilliantly. (No need for the button class for a straightforward inline text link.) You can see this in action at https://tiffanybiljumtherapy.com/approach.html.

Thanks for quick response and the awesome Canvas HTML template. I happily purchased a license to create my wife's new practice website.

--Ron