<!-- top block -->
<div class="flex_center">
    <div class="max_width_1">top block</div>
</div> 

<br/>
<br/>
<br/>
<!-- second block -->
<div class="flex_center">
    <div class="max_width_1">second block</div>
</div> 


<!-- inspect the flex_center elements to see how the width adjusts -->
:root {
 /* 
  max-width for the main content
  adjusted to personal needs 
 */
  --max_width_1: 955px;
}

/*  class dependent on the css variables  */
.max_width_1 {
  width: var(--max_width_1);
}

/* helper class */
.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}


/* add left-right padding to content */
@media screen and (max-width: 1200px) {
  .max_width_1 {
    padding: 0px 50px;
  }
}

/* HTML for a single centered container

<div class="flex_center">
    <div class="max_width">content</div>
</div> 

*/


/*  ignore this,used for demonstration purposes */
div{
  font-size: 40px;
  background-color: rgba(153, 56, 179, 0.5);
}




/* 16 lines minimum

:root {
  --max_width_1: 955px;
}
.max_width_1 {
  width: var(--max_width_1);
}
.flex_center {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media screen and (max-width: 1200px) {
  .max_width_1 {
    padding: 0px 50px;
  }
}

*/

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.