@LuisJimenez19
Posted
Hello, I congratulate you for having finished the challenge
For better control when you have few elements, it is better to manipulate the container and not the content,
You can add flex-direction:column;
to the body to have the card above the attribution section and a justify-content:center;
to the center so you don't use margin
on the card.
something like that:
body {
font-family: 'Outfit', sans-serif;
background-color: var(--lightGrey-clr);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 15px;
gap: 30px;
}
.card {
background-color: var(--white-clr);
padding: 15px;
text-align: center;
border-radius: 17px;
/* text-align: center; */
/* margin: 0 1rem; */
max-width: 300px;
}
.container {
/* max-height: 100vh; */
/* margin: 0 auto; */
/* display: flex; */
flex-direction: column;
justify-content: center;
}
If you want, you can remove the container, so it could look a little better, I'll leave you with the task of adding a shadow so it would look prettier, I hope my contribution is helpful, gambaree.