Beginner: How can I make my site responsive?

I just started delving into HTML and CSS for the first time as a hobby, and I'm trying to make a fairly simple website. However, I'm struggling quite a bit with making the website responsive.

I'm really only looking for at least semi-consistent display within different monitors (eg: 24in-27in screens on average, not worrying about mobile platforms) however despite my best efforts, I'm unable to get the page to scale properly.

Initially, I was using Absolute positioning on everything, and using pixels to position the elements.

I've swapped to using Relative Viewport measurements, and I've created a flex container for the 4 main sections of the page, and I'm still running into the following issues:

Good

The page is properly formatted on a default full screen browser on my screen, however when I change to windowed mode, the images and text shift away from their positions, and the images refuse to scale to a relative size.

Bad
Below is the HTML for one of the problem sections, the "Left" div of the Mainbody flex container

<div class=mainbody> <div class=left style="width:24vw"> <img class="linkimg" src="link.png"> <h1 id= "navborder"></h1> <img class="header" src="header.png"> <h1 id= "links">Links</h1> </div>

I have the following code in CSS for the above items trying to make the items scale properly

html, body, .section-images { width:100%; height:100%; margin:0; } img{ width:auto; height:auto; max-width:100%; max-height:90%; } .mainbody { display:flex; flex-direction: row; #navborder { color: white; border-width: 6px; border-style: ridge; border-color: #139eab; border-radius: 5px; font-family: "Lexend", sans-serif; width: 18vw; height: 44vw; top: 2.5vw; position: relative; background-color: rgba( 53, 115, 130, .4); left: 1vw; z-index: 49; .linkimg { transform: scale(2); position: absolute; left: 1.2vw; top: 22vh; z-index: 50; } .header { top: -87vh; left: 9vh; transform: scale(1.1) scaleX(1.7); position: relative; z-index: 51; #links { color: white; font-family: "Lexend", sans-serif; width: 3vw; height: 3vh; position: absolute; left: 10vw; z-index: 100; top: 17.5vh; font-size: 1.1vw; }

The full website can be inspected live here if more information is needed:

https://faultylost.neocities.org/front

Thank you!