CSS网格中的居中元素

Question

如何使.main和.sidebar水平居中并使它们立即响应？

现在它很好，它的响应速度很快，但它在左侧。我想使其居中。在代码中添加或更改什么？我只需要2列，如果屏幕宽度<主要部分，则将其放在一列中。

.wrapper {
  display: grid;
  background-color: gray;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  grid-gap: 30px;
}

.main {
  width: 700px;
  background-color: green;
  align-content: center;
}

.sidebar {
  width: 360px;
  background-color: red;
  align-content: center;
}

<main class="wrapper">


  <div class="main">

    <h2>MAIN SECTION</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae non repudiandae ea eos architecto amet, cumque sed, quisquam corporis magnam, laudantium maiores obcaecati iusto velit aperiam, vero eveniet placeat. Dolorem!</p>

  </div>

  <div class="sidebar">

    <h2>SIDEBAR</h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae non repudiandae ea eos architecto amet, cumque sed, quisquam corporis magnam, laudantium maiores obcaecati iusto velit aperiam, vero eveniet placeat. Dolorem!</p>

  </div>

</main>