如何确保css中一致的边距空间？

Question

我有这段代码：

＆＃13;

＆＃13;

.wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
        grid-auto-rows: 100px;
}
.wrapper div:nth-child(1) {
  background-color:orange;
}
.wrapper div:nth-child(2) {
  background-color:green;
}
@media screen and (max-width: 700px) {
  .wrapper {
    /*grid-template-columns: 1fr;*/
  }
}

＆＃13;

<div class="wrapper">
  <div>
    <div style="width:600px; background-color:cyan;">One</div>
  </div>
   <div>Two</div>
</div>

＆＃13;

＆＃13;

＆＃13;

当屏幕宽度足够大时，它会显示如下

webkitStorageInfo.requestQuota()

注意有页边距，所以左侧和右侧的空间。但如果我使屏幕宽度变小，右侧空间就会消失。

注意，我让页面一直向右滚动，但是没有右侧边距空间了。

有谁知道为什么会发生这种情况以及如何解决这个问题？

由于