@JordanKisiel
Posted
What units to use in what situation really depends on what you want to do with a given design. However, pixels should be avoided in most situations except for cases where you don't want to resize something (for instance, border-sizes). That being said, I found this video to be very helpful:
Are you using the right CSS units?
For your second question I would make the body element into a flexbox and extend it the full height of the window like so:
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
You'll also need to remove the margin-top (or set it to 0) on the .card class.
Marked as helpful
@mays21
Posted
@JordanKisiel Hi Jordan, thank you for your useful feedback. I set the properties in the CSS and now the box is centered! Also, the video "Are You using the right CSS units?" was very clear. I have successfully completed the design. Thank you so much ❤