<div class="wrap">
  <div>
    <p>Left.</p>
  </div>
  <div>
    <p>Right.</p>
  </div>
</div>
<p><a href="https://www.sitepoint.com/community/t/two-column-responsive-layout-with-center-px-margin/263260?u=sama74">https://www.sitepoint.com/community/t/two-column-responsive-layout-with-center-px-margin/263260?u=sama74</a></p>

* {
  outline: 1px dotted blue;
}

.wrap {
  max-width: 70em;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-flow: wrap;
  justify-content: space-between
}

.wrap > div {
  box-sizing: border-box;
  margin: 0.2em;
  background: #d00;
  flex: 1 1 20em;
}