JSFiddle - React, Tailwind, and code Playground

HTML

<section class="container">
  <h2>Lorem, ipsum dolor.</h2>
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia delectus fugit quaerat veniam, deleniti iure minima repudiandae minus distinctio, quis libero blanditiis. Aliquam recusandae maiores vel ducimus minima amet pariatur?</p>
  <img src="//placeimg.com/1200/960" alt="">
</section>

CSS

body {
  margin: 0;
  font-size: 120%;
  line-height: 1.4;
  background: #f2f2f2;
  color: #333;
}

img {
  max-width: 100%;
  height: auto;
}

.container {  
  --gutter: 1.5rem;
  --container-width: 560px;
  --padding-value: calc(50% - var(--container-width) / 2);
  
  border-style: solid;
  border-color: transparent;
  border-left-width:  var(--gutter);
  border-right-width: var(--gutter);
  padding-left:  var(--padding-value);
  padding-right: var(--padding-value);
}

  @supports (padding: max(0px)) {
    .container {
      border-left-width: 0;
      border-right-width: 0;
      padding-left:  max(var(--padding-value), var(--gutter));
      padding-right: max(var(--padding-value), var(--gutter));
    } 
  }