Проблема с CSS при генерировании PDF из HTML в Django

не могу понять почему некоретно работают стили при генерировании PDF из HTML шаблона.

Вот шаблон:

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Task</title>

        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Martel+Sans:wght@200;300;400;600;700;800;900&display=swap" rel="stylesheet">

        <style type="text/css">
            *{
                margin: 0;
                padding:0;
                box-sizing: border-box;
                font-family: 'Martel Sans', sans-serif;
            }

            body {
                position: relative;
            }

            .CB-header {
                width: 100%;
                height: 300px;
                background-color: #075977;
                position: absolute;
                top: 0;
            }

            .CB-footer {
                width: 100%;
                height: 25px;
                background-color: #075977;
                position: absolute;
                bottom: 0;
                z-index: 0;
            }

            .wrap_content > div {
                overflow: hidden;
                display: inline-block;
                vertical-align: top;
            }

            .wrap_content {
                max-width: 1150px;
                margin: auto;
                z-index: 1;
                position: relative;
            }

            img.cb_images {
                max-width: 90%;
                display: block;
                margin: 35px auto;
            }

            .CB-header-left {
                width: 400px;
                background: #e9fdff;
                padding: 10px;
                padding-top: 60px;
                padding-bottom: 90px;
            }

            .CB-header-right {
                width: 50%;
                padding: 85px 0 80px 85px;
            }

            h1.CB-main-heading {
                font-size: 58px;
            }

            .CB-header-content * {
                color: #e9fdff;
            }

            .CB-header-content > p {
                font-size: 36px;
                margin: -20px 0 15px 0;
                font-weight: 100;
            }

            h1.gen_heading {
                background: #e9fdff;
                color: #3c5d79;
                padding: 5px 10px 0;
                font-size: 28px;
                line-height: 48px;
            }

            .right_gen_text ul {
                list-style: none;
                margin: 20px 11px;
            }

            .right_gen_text ul li {
                color: #3c5d79;
                font-size: 24px;
                font-weight: bolder;
                line-height: 30px;
            }

            .CB-header-content {
                margin-bottom: 100px;
            }

            .right_gen_text p {
                color: #3c5d79;
                font-size: 27px;
                margin: 40px 11px 20px 11px;
                line-height: 30px;
            }

            p.cb_contact_data {
                color: #3c5d79;
                padding: 5px 23px;
                font-size: 22px;
                font-weight: bold;
                margin-top: 55px;
            }

            .right_gen_text.last_child {
                position: absolute;
                bottom: 94px;
            }

        </style>

    </head>
    <body>

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

        <div class="wrap_content">

            <div class="CB-header-left">

                <img class="cb_images" src="images\image-1.png" alt="Image-1">
                <img class="cb_images" src="images\image-2.jpg" alt="image-2">
                <img class="cb_images" src="images\image-3.png" alt="image-3">

                <p class="cb_contact_data">
                    Telefon: +49 163 01 77 555<br/>
                    E-Mail:hallo@wirklichtolleseite.de
                </p>

            </div>
            <div class="CB-header-right">
                <div class="CB-header-content">
                    <h1 class="CB-main-heading">P.R.E.BONBON</h1>
                    <p>STANDORT: MADRID</p>
                </div>


                <div class="right_gen_text ">
                    <h1 class="gen_heading">MERKMALE IM ÜBERBLICK</h1>
                    <ul>
                        <li>NAME:</li>
                        <li>RASSE:</li>
                        <li>GESCHLECHT:</li>
                        <li>GRÖSSE:</li>
                        <li>FARBE:</li>
                        <li>ABSTAMMUNG:</li>
                        <li>AUSBILDUNG:</li>
                    </ul>
                </div>



                <div class="right_gen_text">
                    <h1 class="gen_heading">BESCHREIBUNG:</h1>
                    <p>BONBON IST EINAUSGEZEICHNETER P.R.E. DEREXTRAKLASSE. ER ZEICHNET SICHNICHT NUR DURCH SEINE OPTIKAUS. AUCH SEIN GANGWERK</p>
                </div>



                <div class="right_gen_text last_child">
                    <h1 class="gen_heading">MERKMALE IM ÜBERBLICK</h1>
                    <ul>
                        <li>6.000€ Verhandlungsbasis</li>
                    </ul>
                </div>

            </div>

        </div>

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


    </body>
</html>

Вот функция которая генерирует PDF:

def anzeige_render_pdf_view(request, *args, **kwargs):
    pk = kwargs.get('pk')
    fertig = get_object_or_404(Fertig, pk=pk)


    template_path = 'main/pdf_template.html'
    context = {'fertig': fertig}
    # Create a Django response object, and specify content_type as pdf
    response = HttpResponse(content_type='application/pdf')
    # if download:
    response['Content-Disposition'] = 'attachment; filename="angebot.pdf"'
    # if display:
    #response['Content-Disposition'] = 'filename="report.pdf"'
    # find the template and render it.
    template = get_template(template_path)
    html = template.render(context)

    # create a pdf
    pisa_status = pisa.CreatePDF(
        html, dest=response)
    # if error then show some funy view
    if pisa_status.err:
        return HttpResponse('We had some errors <pre>' + html + '</pre>')
    return response

Вот как должно выглядеть:

Шаблон HTML

А вот что генерируется при создании PDF:

Картинки и данные будут меняться

Вернуться на верх