@Sen-Nyin
Posted
If I am understanding your question correctly, and you want your footer to appear at the top of the page, you want to set your <body> to position relative, and your <footer> to position absolute, with top: x. However, this is not great for accessibility - you'd be better off moving your footer content into a <header>. You can then set your header to position absolute, so that it's not pushing the rest of your content down.
Center everything else on the screen by using this on your <body>: min-height: 100vh; display: grid; and place-items: center;
Then put your content inside <main>. Your <main> should have no position setting.
As for the screenshot, I think there is an issue with the screenshot generation. I pay for pro and use the Figma files - I know all of my measurements are exact, however the screenshot is always slightly different to what I see.