Anchor to content on the same page does moves down too far

Site URL: https://www.chriszforma.com/priorities/

On my page I have 6 images and they have as their URL the jump to the anchor ID found lower on the same page.

However, the jump to the anchor goes past the header that holds the anchor.  it jumps to the middle of the paragraph below the <h3> header that hold the anchor id.

How can I get it to jump to and display the header?

Remove anchor id in <h3>

<h3 id="education" style="text-align:center;white-space:pre-wrap;">Invest in education and training</h3>

add Code Block above h3, & use this code

<span id="education"></span>

Repeat for other 6 headings

thank you, but this is my finding after following your tip.  It is a little better but not exact.  Plus it added extra white space by adding a new code block. 

You can use CSS to remove extra space.