Fixed page header overlaps in-page anchors (Tailwind CSS)

Question

Hey I'm having the same issue with this issue but I can't figure out how to solve it with Tailwind CSS.

http://example.com/#bar

WRONG (but the common behavior):         CORRECT:
+---------------------------------+      +---------------------------------+
| BAR///////////////////// header |      | //////////////////////// header |
+---------------------------------+      +---------------------------------+
| Here is the rest of the Text    |      | BAR                             |
| ...                             |      |                                 |
| ...                             |      | Here is the rest of the Text    |
| ...                             |      | ...                             |
+---------------------------------+      +---------------------------------+ 

My Header component

<header className="sticky w-full top-0 shadow-lg">
  <div className='bg-black text-white w-full h-20 items-center text-center p-5 '>
    <h1 className='font-bold text-3xl'><Link href={"/"}>Foo</Link></h1>
  </div>
  <HeaderCategories />
</header>

My Content component

const Content = ({ children }) => {
    return (
        <main className='bg-slate-50 p-5 w-full  m-3  mx-auto sm:w-[45rem] lg:ml-[max(0px,calc(50%-12rem))] xl:ml-[max(0px,calc(50%-25rem))] xl:w-[55rem]'>
            {children}
        </main>
    )
}

I tried making Header absolute and adding another div with relative to move content down but it not worked.