CSS-сетка создает непропорциональные макеты при использовании фракций и размера экрана в процентах

Question

У меня возникли проблемы с правильной работой CSS Grid с моим приложением React.Когда я использую grid-template-columns: 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;
}

Answer 1

Возможно, что родительский элемент имеет атрибут CSS "padding-right", который смещает содержимое экрана.

Answer 2

Может быть другой дочерний реагирующий компонент, кроме основного тела или какого-либо стиля для родительского компонента, который создает проблему. Вы можете просмотреть кодовый код вашего кода здесь: https://codepen.io/sakettawde/pen/yxvoxM

HTML:

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

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;
}