When I click on the links in nav-bar, I am able to scroll directly to the relevant spot in the page but since it brings that spot to the top of the screen, it ends up getting obscured by nav-bar.
I read somewhere that the way to overcome this was to set margin-top to the same height as nav-bar. So I did that for the element with ID, “main”. To no avail.
My codepen: https://codepen.io/sabahatiqbal/pen/EpPvZb