Style and HTML for Certificate of Participation. Eledo Tech Support

[IsmaelInRedlands]

This HTML And Style renders OK in preview but the text shows underneath the image when exported to PDF in eledo.

<div class="container esri-cert" style="font-family: Arial, sans-serif;position: relative;background-size: contain;width: 100%;"><img src="https://www.esri.com/content/dam/esrisites/en-us/about/events/user-conference/assets/2020/uc20-fun-run-certifcate-bg.png" style="
    width: 100%;
" />
<div class="content" style="position: absolute;">&nbsp;
<h1 style="font-size: 34px; font-style: italic; text-align: center;">&nbsp;</h1>

<h1 style="font-size: 34px; font-style: italic; text-align: center;">&nbsp;</h1>

<h1 style="font-size: 34px; font-style: italic; text-align: center;">&nbsp;</h1>

<h1 style="font-size: 34px; font-style: italic; text-align: center;">&nbsp;</h1>

<h1 style="font-size: 34px; font-style: italic; text-align: center;z-index: 99;">Esri UC Virtual Fun Run/Walk 2020</h1>

<p style="font-size: 28px; text-align: center;">Certificate of participation</p>

<p style="font-size: 28px; text-align: center;"><span class="dg_item" id="participant" style="font-size: 24pt; color: rgb(0, 118, 193);" type="text">participant</span></p>

<p style="border-top: 1px solid #000; width: 400px; margin: auto; padding-top: 10px;"><span style="font-size:12pt;">Participant&#39;s Name</span></p>

<div class="dd" style="display: flex; flex-direction: row; justify-content: center; margin-top: 30px">
<p style="width: 170px; margin-right: 40px"><span style="font-size:14pt;"><span alt="7/14/2020" class="dg_item" id="date(date,'MM/DD/YYYY')" style="font-size: 20pt; color: rgb(0, 118, 193);" type="date">7/14/2020</span></span> <span class="label" style=""><span style="font-size:12pt;">Date</span></span></p>

<p style="width: 170px; "><span class="dg_item" id="distance" style="font-size: 20pt; color: rgb(0, 118, 193);" type="text">distance</span> <span class="label"><span style="font-size:12pt;">Distance</span></span></p>
</div>
</div>
</div>
---------------------------------------------------


-----------------------------------------------


body {
    /*color: black;
    background-color: white;
    font-size: 10pt;
    font-family: Liberation Sans;
    padding: 32pt;*/
}

 

      .container {
            width: 100%;

 

            display: flex;
            justify-content: center;
            align-items: center;
        }
       .container img {
             width: 100%
       }

 

        .content {
            height: 600px;
            text-align: center;
        }

 

        .label {
            display: block;
            border-top: 1px solid #000;
            padding-top: 10px;
        }
        
        @media print {
            @page {
                size: landscape;
                margin: 0;
                width: 1500px;
                height: 1000px;
            }
        }