<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 > div {
  background: #d00;
}

@media screen and (min-width: 36em) { /* Only on the big screen */
  .wrap {
    max-width: 70em;
    width: 100%;
    margin: 0 auto;
    display: table;
    table-layout: fixed;
    border-spacing: 0.2em; /* For your border */
  }
  .wrap > div {
    display: table-cell;
  }
}