CSS网格在使用分数和屏幕大小百分比时创建不成比例的布局

我在让CSS网格与我的React应用程序正常工作时遇到了一些问题。当我使用

网格模板列时：1fr 3fr 1fr

，其中一列

1fr

比另一列小得多（因此与中间列相比，右侧的空间比左侧创建的空间小得多）。这有什么特别的原因吗？以下是我的CSS的其余部分：

#main-body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-auto-rows: 100px;
  background-color: white;
}

#main-header {
  color: white;
  background-color: darkcyan;
  grid-column-start: 2;
  grid-row-start: 1;
  text-align: center;
  display: inline;
}

#quote-render-block {
  text-align: center;
  background-color: orange;
  grid-column: 2;
  grid-row-start: 2;
}

---

除了主体或创建问题的父组件的某些样式之外，可能还有另一个子组件。您可以在此处查看代码笔：

HTML:

---

父元素可能有一个“padding right”CSS属性，该属性会改变屏幕的内容。

寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码，最好是在问题中。看到了吗？是的，您是右-正文的边距和填充未设置为0。我想这可能与React有关，谢谢你的帮助！

<div class="main-body">
  <div class="main-header">
    </div>
  <div class="quote-render-block">
    </div>
</div>

.main-body {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  grid-auto-rows: 100px;
  background-color: white;
}

.main-header {
  color: white;
  background-color: darkcyan;
  grid-column-start: 2;
  grid-row-start: 1;
  text-align: center;
  display: inline;
}

.quote-render-block {
  text-align: center;
  background-color: orange;
  grid-column: 2;
  grid-row-start: 2;
}