Во первых:
<meta name="viewport" content="width=device-width, initial-scale=1">
Родительские блоки по высоте выстраиваются за счёт их потомков + margin/padding. По ширине задавай только max-width - чтобы блоки не были больше размера указанного, а если область просмотра меньше, то блоки будут масштабироваться.
Все дочерние элементы выставляй в процентных размерах(ширину), чтобы они занимали весь родительский блок.
<body><div class="main-wrapper"><div class="main"></div></div></body>
В данном случае.
body{
display: flex;
jusctify-content: center;
align-items: center;
// или дочернему объекту margin: 0 auto;
}
.main-wrapper{
max-width: 1200px;
}
.main{
width: 100%;
}
