Results Summary

Hi there, congratulation on finishing this project!

I have a little suggestion. you can try to put display: flex on the body itself like the way you did on the main, this way it will automatically adjust and always be on center based on your screen size and I think you forgot to add a cursor on your button. As for me, you did a great job, and I find it good.

display:flex
min-height: 100vh
justify-content: center
align-items: center

Congratulations on completing this Challenge Matheus. You have done a good job of re-creating the desing.

I understand the problem you mention regarding the responsiveness of the design. I see a couple of problems in your code -

1. Do not set your body to a fixed width, because it will remain fixed at that and will not automatically resize based on your screen size.
2. Body height, should be a set as min-height : 100vh. So, that at minimum it is 100vh and it can expand if required.
3. Setting the width of your main container as 45%. The 45% is set basd on the parents width. If the parent is 100px, main will be 45px, if it's smaller, it will get even smaller. Instead set a maximum width, so that the main container will get have a maximum width of let's say 800 pixel. When the screen size shrinks, it will shrink down if possible.

There are many others, but if you start here. I think you will have a good start. Keep learning, keep coding!