All solutions

I finally found out how to center using left: 50%, top: 50;. Would love any additional feedback:)

I still can not figure out how to vertically center my <main> element. I have tried align-items with flex multiple times but it just doesn't work. I would love to hear any feedback on how to align any div element to the center relative to the screen size of the browser.

Would also love any other tips you could give me. Currently learning responsive CSS, although not doing great atm.

Could anyone give me advice on how to center and align objects in a more responsive-friendly way? I would like to understand how to use more percentages to create designs that will look good and scale to the desired screen size via percentages, not just specific @media values.

Would love any tips you might have :)

Would you recommend using Grid or Flexbox in designs like this with a 50 / 50 layout?

How would you go about creating them and making them responsive?

*Apologies for the choppy formatting.