I used this (Vs-code, Html, Css) to complete the challenge

Hello umar, congratulation for resolving this challange, for your problem I suggest to give the body element body { display: grid; place-items: center; min-height: 100vh; } and remove position and translate attribute from main. this will fix your code.

👾Hello @Umar29, congratulations for your new solution!

👏 Great start and great first solution! You’ve done really good work here putting everything together, I’ve some suggestions you can consider applying to your code:

I saw that you've used margins and position absolute to give the container its alignment, this works but is really tricky to control all the content. My advice for you is to use flexbox to create this alignment.

Remove this to make the alignment work:

main {
    /* position: absolute; */
    /* left: 50%; */
    /* top: 50%; */
    /* -webkit-transform: translate(-50%, -50%); */
    /* transform: translate(-50%, -50%); */
    width: 320px;
    height: max-content;
    background-color: white;
    text-align: center;
    border-radius: 1rem;
    /* padding: 16px 16px 16px 16px; */
}

To make this alignment, first of all put min-height: 100vh to the body to make the body display 100% of the viewport height (this makes the container align to the height size thats now 100% of the screen height) size and display: flex e flex-direction: column to align the child element (the container) vertically using the body as reference.

Add flexbox and min-height to make it align:

body {
    min-height: 100vh;
    background: hsl(220, 15%, 55%);
    display: flex;
    align-items: center;
    justify-content: center;
}

✌️ I hope this helps you and happy coding!