Responsive page using display: inline-block and @media tag.

I found it difficult to make the page responsive and found that there was a lot of code required to make the page look good at the various sizes. Could someone review the code please and perhaps suggest a better way of structuring the CSS? Bear in mind that I have yet to learn flex and grid and also wanted to challenge myself by using the more basic "display-inline-block".

Making the page responsive without having the "right-block" move below the "left-block" during page resizing was very challenging. I made sure that the entire width of both pieces of content was far below 100% to ensure that this did not happen. I also minimized padding and margins, Any tips here would be appreciated.

I also added 3 separate widths as this is what the page looked best with. Any comments regarding this?

I used mostly "rem" to allocate padding, fonts and widths. Is this best practice? I did this to help with responsiveness.