Misalignment when printing/saving to PDF

I'm having a problem when I want to print/save as PDF my HTML page.

At first, I didn't add anything to my code, and when the web page was saved as PDF (Ctrl+P), it looked like this : My webpage once converted into PDF - V1
Using YouTube videos and ChatGPT, I managed to remove everything I didn't want, i.e. everything except the content of the webpage (so all the children in the division identified by print-section are in the PDF)
But it's misaligned. It seems to retain the same dimensions and positions as before (in the webpage), whereas I'd like it to no longer take into account how it was placed in the webpage, I'm trying to print the content as if there were nothing else (the green border would be coincident/confounded/mix/combined with the border of the PDF, whereas there, that's not the case ...), here's the result : My webpage once converted into PDF - V2

(To better see that it has kept the same dimensions and positions, you can simulatenously compare the two images, and you'll see that it's in exactly the same place, even though there shouldn't be as much space on the left and top.)

So I'd like someone to help me correct the code, so that when I print or save the web page as a PDF, it grabs the right division (the one that is identified by print-section) and makes it take up the whole page, without leaving a gap on the left and top... Well like I said, as if the green border visible on the webpage were the border of the PDF once the page has been saved...

Here's parts of my HTML code (i couldn't send the whole code because it has been related to spamming...)

<style>
        /* Choisi ce qui doit être imprimer et comment */
        @media print {
            body * {
                visibility: hidden;
            }
            #print-section * {
                visibility:visible !important;
            }

            #print-section {
                position:absolute;
                left:0;
                top:0;
            }
        }...
...

<div class="scrollable-box" id="print-section" style="position:absolute;top:74px;left:16px;right:16px;bottom:74px;border:1px solid #00FF00;color:white;padding:16%;font-family:'LMRoman10';overflow:auto;">
contents...
...

Don't pay attention to the page dimensions, to pay attention to division position in both images...

The first image, is when i add nothing

The second, when i add this to my document :

        @media print {
            body * {
                visibility: hidden;
            }
            #print-section * {
                visibility:visible !important;
            }

            #print-section {
                position:absolute;
                left:0;
                top:0;
            }
        }

And as you can see, it is still misaligned...
In fact, it should give something like this :

Solution

Review the difference between these two CSS properties:

visibility: hidden — the element is hidden but still consumes its original space (the layout is unaffected).

display: none — the element is removed completely from the layout (so the layout adjusts to compensate).

You are using the first one, but need the second one.