<div class="synergy lightblue-background">
  <h2>example1</h2>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore odit quam quidem? Iste enim voluptatibus, facere perspiciatis eaque necessitatibus nihil consequatur similique, laudantium nostrum fugiat! Saepe velit quia natus non!
  Dolorem aut quam enim doloremque consequuntur? Repellendus, officiis delectus repudiandae quisquam qui repellat consectetur ducimus enim unde provident earum labore fugit porro. Saepe eaque minus, laborum ea modi facere aspernatur?
  Quibusdam, quasi. Iste vitae, saepe, magnam distinctio numquam illo perferendis officiis sed assumenda rem aut voluptatem accusantium nemo consectetur nulla corrupti et at maxime sit. Quo inventore eos assumenda deleniti!</p>
</div>

<hr>

<div class="flex-container">
  <div class="flex-content goldenrod-background">
    <h2>example2</h2>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ut veniam architecto alias impedit maiores at laudantium, excepturi odit culpa voluptate dolore molestias beatae sint optio cum? Corrupti, maxime magni.
    Nobis quos ipsam beatae in dolorem provident quis culpa tenetur expedita explicabo, nemo voluptatibus saepe quod, blanditiis quae eaque recusandae quo! Voluptas excepturi perferendis enim dolorum eos alias pariatur nam.
    Fuga, repellendus necessitatibus dolore molestias est, debitis nihil quos eius eum suscipit eaque quis fugiat cumque eos perspiciatis aliquid vel maiores consequatur deleniti quia aspernatur reprehenderit, odio voluptatem! Id, voluptates!</p>
  </div>
</div>

div.synergy {
  max-width: 600px;
  margin: 0 auto;
}


div.flex-container {
  display: flex;
  justify-content: center;
  
  .flex-content {
    max-width: 600px;
  }
}


h2 {
  text-align: center;
}
div.goldenrod-background {
  background: goldenrod;
  padding: 5px;
}
div.lightblue-background {
  background: lightblue;
  padding: 5px;
}