Заголовок перекрывает содержимое, если содержимое занимает более 1 страницы

Question

Я работаю над печатью HTML-страницы для многостраничного PDF. У меня есть верхний и нижний колонтитулы на каждой странице. Контент перекрывает заголовок, если он занимает более 1 страницы

Я установил

.Page { 
    page-break-before: always;
  }

чтобы новый раздел начинался на следующей странице

    CSS
    @media print {
    header{
            position: fixed;
                top: 0px;

           }
    footer{
          position: fixed;
                bottom: 0px;
           }
    .Page { 
        page-break-before: always;

      }
    header {
        page-break-after: avoid;
      }
    @page {
            size: A4;
        width: 100%;
        margin: 0; padding: 0;

    }
    }
    html
    <header></header>
    <section><div class=Page></div> <div class=Page></div>
    <div class=Page></div>
    <div class=Page></div> </section>
    <footer></footer>

Теперь проблема в том, что когда содержимое страницы меньше 1 страницы, она работает нормально. он создает несколько страниц с верхним, нижним и нижним колонтитулами в нужном месте, но когда содержимое занимает 2 страницы, верхний колонтитул 2-й страницы перекрывает превышенный контент