@Sdann26
Posted
I don't recommend that you center the screen that way because the margins make it break when you shrink the screen.
Better apply the following to the body:
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
gap: 1em;
Masomenos with the flex we do that it is centered so much in horizontal and vertical and giving him a minimum height of the size of the whole screen always will be centered vertically since if you do not give him it will take the size of the card and it will not be centered, the gap only serves to separate the card with the attribution.
And to the .container you could just put width: 300px so that it has a fixed size but when you shrink the screen and enlarge it stays as it is.
By the way the <h3>Improve your front-end skills by building projects</h3> change it to <h1>Improve your front-end skills by building projects</h1> because you need to have a minimum h1 per project page. By the way don't forget to change the color to have a color like navy blue (--bg-color-darkblue).
I hope my comments are helpful.
Good Coding!
Marked as helpful
@TomTwig
Posted
@Sdann26 Thank you very much for your feedback, it was really helpful :)
