Obsidian's Live Preview Mode border line keep moving

What I’m trying to do

Trying to simulate A4 Page Size in Obsidian with Margins and Borders. This will be good if I dont have to put html tags only to type very long text and knowing how it looks like when it will be printed.

Things I have tried

I try to use various code like this:
Here is my CSS code:

.parent-container {
 position: relative;
}

.markdown-preview-view, .CodeMirror, .cm-s-obsidian.is-live-preview {
 /* your custom CSS for the note page */
 color: #ABB0E6;
 padding: 20mm;
 margin: 10mm auto;
 border: 1px #D3D3D3 solid;
 border-radius: 5px;
 background: white;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 width: 210mm;
 min-height: 297mm;
 page-break-after: always;
 page-break-before: always;
}

.markdown-preview-view::after, .CodeMirror::after, .cm-s-obsidian.is-live-preview::after {
 content: "";
 display: block;
 position: absolute;
 bottom: 20mm;
 left: 0;
 right: 0;
 height: 2px;
 background: black;
}

But this line border keep moving everytime I scroll down and scroll up.

I don’t think this is achievable because Obsidian load content as you scroll. So after you scroll pass the content a certain “length” then the content will be “removed” from rendered html.

Thank you for telling me. Perhaps this is also applies to every markdown note-taking software thus I never see markdown margin except using html element. Perhaps I could do work around with html and trying to make plugin to just edit the text/paragraphs inside html tags.