@Aatypic
Posted
Hello and congratulations on your solution !
Concerning your problem,
To be able to center the card you need it's parent the <body> to be bigger, hence we use a min-height: 100vh
on it.
Also an easy way is to set a display:flex
and center properties on the <body>.
So as last step you could remove the margin auto on the child <div class="main-div">
since the <body> takes care of the positioning.
Good luck ! 👌
Marked as helpful
@Ljr777
Posted
@Aatypic woahh, I really appreciate the help. its extremely useful. didnt see your reply before continuing but I did something similar, you can check my next solution if you dont mind https://sparkling-moxie-8c92f7.netlify.app/