HTML, CSS (Responsive)

Hello there 👋. Good job on completing the challenge !

I have some suggestions about your code that might interest you.

• px is an absolute unit, meaning it stays fixed regardless of the user's preferences. On the other hand, rem is a relative unit, specifically relative to the root element's font size Disadvantages of px:

  • Pixel-based designs may not scale well when users adjust the font size in their browsers, potentially impacting accessibility.
  • Designs in pixels might not be as responsive to varying screen sizes

  Disadvantages of rem:

  • Calculations involving "rem" can be more complex.

• Positioning elements with position: absolute can lead to significant issues. If you zoom in on your solution, parts might distort, separate, or overlap. It would be beneficial to use a grid for creating two columns and utilize flexbox or grid for centering to avoid these problems

I hope you find it useful! 😄 Above all, the solution you submitted is great!

Happy coding!

to center de container, use flexbox

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

i used min-height because the flex would recoginize as a box and center it