How to center block for all screen resolutions?

Question

css

Hello everybody! I'm developing a website and a problem arose: with a large screen width, the central block moves to the left ... and also the header stretches across the width of the screen ... in general, it is necessary that all elements remain in the center of the page, no matter what the resolution is, please tell me how all this can be done and is it possible with my code ...
Here is a link to the site: http://parabola365.rf

Answer 1

The first way is the most unpleasant and difficult: Prescribe styles for all permissions, that is

@media only screen and (min-width : 768px) {

}

etc.
The second way is to place the block in another container and set a width for it, later, depending on the permissions, change this width. Read up on the bootstrap grid for that.
The third way is to set the width of the block, and remove position: absolute;, and then set margin: 0 auto;
The fourth (crutch) is to set the p tag instead of div and set the width of the parent div to 100%, text-align: center;

Answer 2

.block {
    display: flex; 
    justify-content: center;
}

And that's it, even media queries are not needed