How to fix overlapping issue in the Qweb reports?

Question

I am developing a couple of reports and I ran into an overlapping issue in the header and footer area. I read a couple of similar posts on this topic (downgrade wkhtmltopdf, edit the paper margins/header spacing) but none of them worked for me. Can anyone give me advice on how can I fix this, I am currently using Odoo version 14. The overlapping doesn't occur only for tables but also for regular div elements with the bootstrap class row.

Paper Format:

    <record id="paperformat_report_quotation_models_contract" model="report.paperformat">
        <field name="name">European A4</field>
        <field name="default" eval="True"/>
        <field name="format">A4</field>
        <field name="page_height">0</field>
        <field name="page_width">0</field>
        <field name="orientation">Portrait</field>
        <field name="margin_top">50</field>
        <field name="margin_bottom">32</field>
        <field name="margin_left">0</field>
        <field name="margin_right">0</field>
        <field name="header_line" eval="False"/>
        <field name="header_spacing">38</field>
        <field name="dpi">90</field>
    </record>

I have no left or right margin in order to place two images in the top right corner of the header but I have created a custom CSS class that I use for assigning margins for the content of the page.

.contract_paper {
margin: 0 25mm;
font-family: 'Montserrat', sans-serif;
}

HTML element that is overlapping

 <div class="row contract_space_text">
        <div class="col-12">
              <span>
                   Some text.
              </span>
        </div>
 </div>

.contract_space_text {
padding-top: 14px;
}

Custom made document layout

<?xml version="1.0" encoding="utf-8"?>
<odoo>
<data>

    <template id="contact_header_footer">

        <div class="header">
        </div>


        <div class="article" t-att-data-oe-model="doc and doc._name" t-att-data-oe-id="doc and doc.id"
             t-att-data-oe-lang="doc and doc.env.context.get('lang')">
            <t t-raw="0"/>
        </div>


        <div class="footer">
        </div>

    </template>
</data>
</odoo>

Overlapping Example

Thanks

Answer 1

I managed to fix this issue by increasing and decreasing the top margin and header spacing of the report's paper format.

Thanks to these links and the help of the above users I managed to fix this issue.

   <record id="paperformat_report_quotation_models_contract" model="report.paperformat">
        <field name="name">European A4</field>
        <field name="default" eval="True"/>
        <field name="format">A4</field>
        <field name="page_height">0</field>
        <field name="page_width">0</field>
        <field name="orientation">Portrait</field>
        <field name="margin_top">52</field>
        <field name="margin_bottom">32</field>
        <field name="margin_left">0</field>
        <field name="margin_right">0</field>
        <field name="header_line" eval="False"/>
        <field name="header_spacing">40</field>
        <field name="dpi">90</field>
    </record>

Custom header overlaps with the body of the report.

Header overlaps the body of the report, table example.

Header is overlapping with the reports body, useful advice.

Header has overlapped the body of the report, another useful advice.