css pdf page - header overlapping with content

Question

As we can see from the image my content overlaps with the header image and this is the code I have:

    <style type="text/css" media="print">
        @page {
            /*size:landscape;*/

            @top-center {
                content: element(header);
            }
            @bottom-left {
                content: element(footer);
            }
        }
        div.header {
            padding: 10px;
            position: running(header);
        }
        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);
        }
        .pagenumber:before {
            content: counter(page);
        }
        .pagecount:before {
            content: counter(pages);
        }
    </style>
</head>
<div class="header">
    <img src="logo.png" title="logo" width="200px"/>
</div>
<div class="content">

</div>

P.S.: Please don't close this question as duplicate as I have already searched all the questions related to the same but mine looks different as PDF is involved.

Answer 1

Headers and footers are established within the page margins.

So the solution is to increase the page top margin, for example:

@page {
        margin-top: 50mm; 
}