QR code project using CSS

👾Hello @stepheigbe, congratulations for your new solution!

You've done a good work here and we'll fix your solution together:

Remove these properties, the card size is max-width: 320px note that 1440px is only a reference to say in with dimension the desing were created.

main {
    max-width: 320px
    /* width: 1440px; */
    /* height: 800px; */
}

My advice here is to use flexbox to create this alignment. First of all add to the body min-height: 100vh to make the body display 100% of the browser screen size and display: flex e flex-direction: column to align the child element (the container) vertically the body is the parent in this situation.

Here's the code to align you solution:

body {
    display: flex;
    margin: 0;
    min-height: 100vh;
    padding: 0;
    font-family: 'Outfit', sans-serif;
    margin: 15px;
    font-size: 15px;
    background-color: rgb(150, 183, 226);
    align-items: center;
    justify-content: center;
}

👋 I hope this helps you and happy coding!