I'm converting my html content to pdf, but it doesn't fully occupy the page a4. My DPI value is 96. According to this dpi value, it should be width:794px, height:1123px, but when I do this, it takes up half of the page in width and almost 1/4 in height. how do i solve the problem?
#SC_Header {
width: 794px;
height: 1122px;
}
.scHeaderBG {
background-image: url('https://i.pinimg.com/originals/78/a5/da/78a5dac5e6b17cc75722b30c9bfa6df9.png');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<body>
<div id="main-content xSiyah">
<section id="SC_Header" class="PageBreak break-after scHeaderBG">
<div class="row">
<div class="col col-12 text-center" style="text-align:center;">
<img src="$$MemberImage$$" class="shadow-sm" style="width:220px; height:260px; position: relative; top: 752px" />
<h3 class="Rb xTuruncu custom-title" style="position: relative; top: 380px;">$$NameSurname$$</h3>
</div>
</div>
<div class="row">
<p style="height:290px;"></p>
<div class="col col-12 text-center" style="text-align:center; position:relative; left:600px; top:1230px;">
<img src="$$CertificateQRCode$$" class="" style="width:100px; height:100px;" />
<p class="custom-text">Certificate Number: <strong>$$ApplicationNo$$</strong></p>
<p class="custom-text">Issued Date: <strong>$$CourseEndDate$$</strong></p>
<p class="custom-text">Expiry Date: <strong>$$ExpiryDate$$</strong></p>
</div>
</div>
</section>