Responsive layout using HTML, CSS

Hey buddy, Nicely done and i hope you don't mind, i would add something that has given to me also

body {
.../...
  align-items: center;
  min-height: 100vh;
}

And i would personally remove the margins from either resolutions and maybe try revers the media query with something like

.main-container{
.../...
width:75%
}
@media screen and (min-width: 450px) /* obtional (min-height:450px)  */ and (orientation: landscape)
.main-container {
    width: 25%;
}
```