@KoliOyama
Posted
Yes, you were right to use flexbox. Just to clarify;
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
Using justify-content: center, the container will be set at the horizontal center. While align-items: center will set it at the vertical center.
With grid:
body {
display: grid;
Place-items: center;
min-height: 100vh;
}
As for managing the widths, try making use of the max-width property for the containers. This will restrict it from stretching with your browser window. I hope this helps ;)