Does anyone know how to solve the heading issue?

I have tried using scroll padding, but it didn't work or probably I didn't use it correctly...

is scroll-margin-top what you tried already?

that + a few other ideas here:

likes building things • https://alexgrover.me/links

This worked! 

I was using scroll-padding-top incorrectly it is supposed to be applied to the container not to the element itself.

is scroll-margin-top what you tried already?

that + a few other ideas here: https://css-tricks.com/hash-tag-links-padding/