QR Code Component

1. its ok to add grid but i think you need more learning and practice for grid and i think you must have used grid template-column 1fr 1fr 1fr or there are other ways also to do .read

https://css-tricks.com/snippets/css/complete-guide-grid/

2)you can also use flexbox for centering or transform:translate() etc

3)i cannot see any responsiveness implemented ,it will be great if you do that with for ex media queries etc

4)Read about h1 tag its the most important and every website should have atleast one https://www.semrush.com/blog/h1-tag/

5)you should learn about semantics HTML and using it for ex footer ,main etc

All the best

try this

@media only screen and (max-width: 1440px) body { background-color: #d5e1ef; display: flex; justify-content: center; align-items: center; flex-direction: column; height: 98vh; /* padding-top: 4%; / / padding-bottom: 2%; */ }

It looks like display grid doesn't change how your body behaves, it does not center your component

You could give it height of 100vh to take whole page, display it as flex, make it's direction column so that your footer stays at the bottom and justify it's content to the center, so your code would look something like this:

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

This also makes paddings in your body, and both margins in your .card-container obsolete, because you already have it centered within body tag