Smooth scrolling aligns to text not section

Site URL: https://www.botisseva.com/about

The 'about' section of this website is very long, so I added arrow buttons at the bottom of each section to take you to the section below. I did this by adding the relevant section ID to each button and then enabled smooth scrolling with this:

html {
scroll-behavior: smooth;
}

I'm fairly happy with how it works, except that when it scrolls down it lines up with the text in the section, rather than the top of the section itself, which doesn't look as good (so basically there is no margin at the top). Does anyone know how to make it line up with the top of the section?

A second question – is there additonal code i can add to control the speed of the scroll?

try this: 

// fixes anchor scroll // 

:target:before {
content:"";
display:block;
height:90px; /* fixed header height*/
margin:-90px 0 0; /* negative fixed header height */
}

Hi

Thanks for the repsonse. This makes it look better but not perfect – I think this is just off-setting the scroll by 90px above where the text is?

Each section on the page is set to the 'large' section height in squarespace, which from what I can see makes it fill the browser window top to bottom – regardless of how big the window is (I might be wrong about this).

So when it scrolls, I want it to hit that section exactly at the top, so that it fills the whole screen, and doesn't have a bit of the section above or below showing – as in the attached images. It might not be possible I guess, but I would love it to be!