I use a custom responsive grid on my website as a way to learn independently, understand how exactly they work and reduce bloat.

My custom grid suddenly starting blowing out and I can’t figure out why.

Pretty standard responsive grid. Works like so: Container > Row > Columns.

What I want:
4 columns across. I’ve put together a quick illo to demenstrate what I’m trying to achieve.

What is happening:
DEMO: https://stg-nightshiftstudio-staging.kinsta.cloud/sample-page-do-not-delete/
(They are wrapping)

HTML

 <div class="grid__container">
      <div class="grid__row grid__margin-x">
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
        <div class="grid__cell grid__cell__medium--4">
          <h1 class="text-center">THIS IS A HEADING: 1<h1>
        </div>
      </div>
    </div>

CSS

.grid__row{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  height: 100%;
}

.grid__row.grid__margin-x > .grid__cell.grid__cell__medium--4{
   width: calc(33.33333% - 1.875rem);
}

.grid__row.grid__margin-x > .grid__cell {
   margin-left: 0.9375rem;
   margin-right: 0.9375rem;
}

• Margin is being added to each cell to provide the gutter (0.9375rem)
• The margin on the outer row is being subtracted to afford space for the gutter (1.875rem)
• I was expecting this to allow all 4-columns to appear in a row, based off of many responsive frameworks.

What is going on?