Hello, firstly congrats completing this challenge!
As I checked your code, I see that none of your divs has width or height attributes. You're pushing the main compenent from sides by defining margin to body element. This is pretty bad practice. Instead of this, you could try that;
body{
display: flex;
background-color: hsl(217, 54%, 11%);
justify-content: center;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
.card{
background-color: hsl(216, 50%, 16%);
border-color: hsl(215, 32%, 27%);
border-radius: 1rem;
max-width: 25rem;
}
In this way, you use your body element as your container and align your component exact middle of the page thanks to flexbox property. And limit your .card element's max-width 25rem. So it would be easier to control responsive design.
P.S: Also you don't need these media queries in this scenerio. `
0
