Responsive landing page using CSS Grid

In this case, i really don't think margins will help. Try flex on .container's parent also to center everything. Aaand, why used the positioning? Try live site on your phon(s) also to see if it resembles the requirements. Is one thing to check viewport size and completely different when you check on a phone in some cases.

body {
    background-color: hsl(212, 45%, 89%);
    min-height: 100vh;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.container {
    max-width: 350px;
/* padding: 1rem; */
    background-color: hsl(0, 0%, 100%);
    text-align: center;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}