flex

* {
    margin: 0;
    padding: 0;
    box-sizing: 0;
}

** You should use value of box-sizing property: border-box not 0 because it's invalid value

Wrap everything in the body in a man semantic tag <main> to clear the accessibility issue and also don't forget to add a margin to the main to avoid the container from overflowing screen...you an test it on mobile to see. Besides good job keep coding👍

Hi!

Nice work with the challenge!

There are few things you can improve:

• use max-height and max-width instead of fixed size of main container Check your solution on mobile devices in browser's dev tools - because the element don't change its size part of it goes outside the screen area. There are few other methods to adjust elements for different screen sizes like media-queries or using clamp() method
• I don't know if it was on purpose, but you missed hover effects. If you don't know how to do it check out pseudo-classes
• There is something weird happening with the background image on desktop screen sizes with use of center/cover. It would be better if you used media-queries and switch between desktop image and mobile image.

For reference you can check my solution here