Puppeteer Header and Footer have different scale than content - node.js

Question

enter image description here
I use puppeteer for generate an invoice PDF.
I have a template that is render with nunjucks, I set the content with the puppeteer page function setContent
I have defined a header and a footer, same thing I generate the template with nunjucks
When I render the PDF (await page.pdf(...)) the scale of the header and the footer are larger than the content. The font-scale is 12px and it's larger on the header/footer, same thing for the margin.
Anyone alreay have the issue ? How to fix it ?
I want to have the same scale on header/footer than the content
Here some code:
const html = nunjucks.render(QUOTE_TPL, { $t: i18n.__, quote: foundQuote, linesByPages, keys, fullWidthHeader, currency: '', format: formatPrice, moment, pdf: true, headless_mode });
const footerHtml = nunjucks.render(QUOTE_FOOTER, { $t: i18n.__, quote: foundQuote })
const headerHtml = nunjucks.render(QUOTE_HEADER, { $t: i18n.__, quote: foundQuote, moment })
// Convert HTML quote to PDF
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.emulateMediaType('print')
await page.setContent(html);
const filePath = path.resolve('./tmp/' + file_name + new Date().getTime() +'.pdf');
await page.pdf({
path: filePath,
format: 'A4',
displayHeaderFooter: true,
headerTemplate: headerHtml,
footerTemplate: footerHtml,
margin: {
bottom: '80px',
top: foundQuote.style.header.height + 80 + 'px',
}
});
await browser.close();
And here an example of the header template:
<div style="
-webkit-print-color-adjust:exact;
width: 100%;
max-width: 21cm;
position: relative;
background: #00c1af;
padding: 0;
">
{% if quote.display_rules.title != null %}
<div class="invoice-title {{quote.display_rules.title}}" style="
font-family: 'Roboto', sans-serif !important;
font-weight: bold !important;
color: #212529 !important;
position: absolute;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
-webkit-print-color-adjust: exact !important;
font-smooth: always !important;
font-size: 15px;
top: 2cm;
right: 2cm;
">
{{ quote.title }}
</div>
{% endif %}
<div class="invoice-header" style="
background: #ffff00;
width: 100%;
margin: 0;
padding: 0 1.9cm);
">
{% if (quote.style and quote.style.header and quote.style.header.image) or (quote.company_logo) %}
<div class="logo-wrapper {{fullWidthHeader}}" style="height:{{quote.style.header.height }}px;margin:{{quote.style.header.margin}}px">
{% if headless_mode !== 'true' %}
{% if quote.company_logo %}
<img class="logo" src="{{ quote.company_logo }}" alt="" style="position: relative; width: auto;height: 100%;max-height: 100%;"/>
{% else %}
<img class="logo" src="{{ quote.style.header.image }}" alt="" style="position: relative; width: auto;height: 100%;max-height: 100%;"/>
{% endif %}
{% endif %}
</div>
{% endif %}
<div class="invoice-name" style="
font-family: 'Roboto', sans-serif !important;
color: #212529 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
-webkit-print-color-adjust: exact !important;
font-smooth: always !important;
font-weight: bold !important;
font-size: 15px;
">
<span>
{{ $t('documents.' + (quote.language or 'fr-FR') + '.' + quote.name.trim()) }} {{ quote.number }}
</span>
<span class="invoice-date">
{{ $t("documents." + (quote.language or 'fr-FR') + ".from") }} {{ moment(quote.date).format($t("date." + (quote.language or 'fr-FR') + ".format")) }}
</span>
</div>
</div>
</div>