How to prevent header from overlapping content?

Question

I have an HTML page I want to convert to PDF using WeasyPrint. I want to include a header and footer on every page. I've been able to accomplish this with this:

@media print {
  header {
    page-break-inside: auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  footer {
    page-break-inside: auto;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
  }
  main {
    margin-top: 0.75in;
    box-decoration-break: clone;
  }
}

This repeats them on every page like I need, and if there's a <div style="page-break-after: always;"> in the content, the margin-top: 0.75in is applied and the main content is below the header, like this:

But other than that, the main content is displayed behind the header/footer, like this:

I tried using the @page rules:

@page {
  main {
    margin-top: 0.75in;
  }
}

// OR

@media print {
  @page {
    main {
      margin-top: 0.75in;
    }
  }
}

But nothing in @page seems to be applied and I don't know why.

How do I prevent the overlap like this?