Same Anchor Link Takes Me To Different Place

Hello!

Quick question. I have an anchor link on my www.bomanoma.com/eco-lodge page located in Block-yui_3_17_2_1_1693056221488_12006 of Section id="64e0654d5853205d0264c53f" (see attachment). The anchor link works, BUT, when I click the corresponding link ("Amenities" in the navigation bar), it does not bring me to the same place! Sometimes it works perfectly, and sometimes it scrolls down too far. I have attached two additional screen shots: the way I want the anchor link to work is with the yellow background and brown line above the "Amenities" when clicked. But sometimes, it scrolls down too far (see other attachment) to where it cuts off the top of the word "Amenities." Sometimes it scrolls too far, then I click the link again and it scrolls to the perfect place. Then it won't work, then it will. Same anchor link, brings me to a slightly different spot. I do not have a fixed or sticky header. Is there any reason for this? Thank you in advance!

A bit more background information: 

• The anchor link is "<div id="amenities"></div>".
• The navigation link to the anchor link is: "http://www.bomanoma.com/eco-lodge#amenities".
• I have tried adding a / so it would be "http://bomanoma.com/eco-lodge/#amenities" but it doesn't change anything nor fix the issue.
• There are multiple links to this specific anchor link throughout my website; this issue does not seem to depend on what page I am on, or whether its from the navigation bar or within the website content itself. It seems totally random.

Thanks!

Last comment before I wait for your replies. Attached is where the anchor link code block is located. 

The only thing I can think of is because I have changed the location of the anchor link, and I havent cleared my cache, maybe my web browser is just confused and this isn't an issue on anybody else's computer.

P.S. Some of the anchor links don't seem to work on Safari, but after some research it seems that its a Safari issue not a Squarespace issue.

THANK YOU FOR YOUR HELP 🙂

@bgash11 My theory is that when the screen size is changed, the size of the fluid engines grid column also adjusts, impacting the anchor's position. As a result, the anchors scroll slightly too far. I was able to address a similar issue on a website using the code snippet below.

#amenities {
	scroll-margin-top: 40px;
}

You can add this code under custom CSS panel. You can also try adjusting "40px" in the code. Let me know if it works on your website. Thanks!

Hey Lesum, thanks for the response. Unfortunately it did not work. It did make it so there was a margin above where the code block for the anchor link is, but (without changing window sizes) it it still sometimes bring me to the right place and sometimes to the wrong place - just 40px down each time.

The anchor link still only works correctly 50% of the time, and seems to be completely random. I cleared the cache but still the same issue (see attachments; 50% of the time it comes with the yellow and brown which is what I want, and 50% of the time it scrolls too far down).

I also tried to add 

#amenities {
	scroll-margin-top: 0px;
}

to the custom CSS thinking it could work, but the same issue continued.

What I've done is changed the divider between the two sections to make it a bit wider, meaning whether the anchor links works correctly or it doesn't, either way the page looks ok. But I am still searching for a permanent solution, and would be grateful to anyone who may have an idea!

As you can see in the attachment, the code block with the anchor link is #block-yui_3_17_2_1_1693306326471_13656.

I will not mess around with it anymore for now, and cross my fingers that the CSS is just taking time to load correctly. Maybe in a few days it will work.

Thanks again!