sometimes i don't know how to use css correctly

so here's my shitty page, right now it needs either to use pixelized margin or to use position:relative & move it arround, the problem i'm having is when i actually hate myself and want to use position rather than margin, i get this btw i'm using tailwind main-section max-h-full relative top-24 h-4/6 flex flex-col especially the relative top, it doesn't flow the page as well, it just takes it and overlaps that, i wish there was something in css that you can add like an attribute or a css rule to say to either let elements flow on the page & not overlap cause i decided to move one thing or to wrap them in a div and say let it manually setup; & to just act as this way & ill display stuff as it should cause here's the thing, the moment you pick an element and want to move it , the page doesn't coherently move with it & now you have to move every other bit of html just because you wanted to move one thing