Sticky overlay scroll cutting off content

Hi - Im new to css and ran into a hiccup. I have a code to create a sticky effect for the page sections. However, it cuts off a section "How to..." and the top of the section remains sticky while scrolling - not displaying full section - until the next section is scrolling up, in this case "FAQ."

How can i fix this?

Here's the code:

#page .page-section {position: sticky!important; top: 0px!important}
html {scroll-behavior: smooth}

1 hour ago, WorkflowbyJo said:

Hi - Im new to css and ran into a hiccup. I have a code to create a sticky effect for the page sections. However, it cuts off a section "How to..." and the top of the section remains sticky while scrolling - not displaying full section - until the next section is scrolling up, in this case "FAQ."

How can i fix this?

Here's the code:

#page .page-section {position: sticky!important; top: 0px!important}
html {scroll-behavior: smooth}

Can you share your site with the protected password so I can take a look?

Having the same issue, same code.

Would love a fix, otherwise I'll have to redesign the whole thing :(