Anchor Link Not Doing What I expect

I have two rows of images. When an image is clicked it displays a hidden div below. All working fine. I’ve set the image to also link to an anchor so it will scroll down slightly (more for when I start adding more images.

It seems to work ok on each row if only an image is clicked on that row first but if for example an image one the first row is clicked then and image on the second row is clicked the anchor link on the second row overshoots by some distance.

The anchor is linking to the wrapper div of the image

What it looks like if you click straight on a second row image (OK**): [http://prntscr.com/s7hz8n]

What it looks like if you click on a second row image after you have already opened a first row image (NOT OK) [http://prntscr.com/s7hyc8]

** Would be nice if it could stop at the top of the image but I can live with it as it is, something to do with the fixed header no doubt.

If anyone can help, would really appreciate it, pretty new to webflow

Here is my site Read-Only: [https://preview.webflow.com/preview/gabrielcam-development-v2?utm_medium=preview_link&utm_source=designer&utm_content=gabrielcam-development-v2&preview=d36d5b129caacfdeb4e237e3746adb8d&pageId=5ea6872d08815459ecbd5bbc&mode=preview]
(how to share your site Read-Only link)