@Rioba-Ian
Posted
Hi Ruth,
If you want to center the card you can easily style the <main> as follows
main{
display: flex;
flex-direction: column;
align-items: center;
justify-items: center;
}
Also, you can set a min-width so that in smaller screen it doesn't touch the edges
main{
width: min(80%, 1200px);
margin: 0 auto;
}
This ensures that it always stays at the center and will never fully touch the edges. I've added the 1200px as a maximum for large screens; you can play around with this value but will mostly apply to layouts that are larger than the card you have.
The execution is perfect and you did a great job šš»
Marked as helpful
@ruth-chirwa
Posted
thank you so much!! i actually tried this and its sort of in the middle. i just need to tweak it @Rioba-Ian