title: Padding on CSS grid container isn't rendering on the right side
body: <p>I'm new to CSS Grid and can't figure out why the padding on the container isn't rendering when there is overflow scrolling.</p>
  
  <p>This is the HTML I've got setup:</p>
  
  <pre><code>&lt;div class="Container"&gt;
      &lt;div class="Column"&gt;&lt;/div&gt;
      &lt;div class="Column"&gt;&lt;/div&gt;
      &lt;div class="Column"&gt;&lt;/div&gt;
      &lt;div class="Column"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS(SCSS) is:</p>
  
  <pre><code>$unit: 8px;
  
  .Container {
    display: grid;
    grid-template-columns: repeat(4, $unit * 47); // 8px * 47 = 376px
    grid-column-gap: $unit * 4; // 8px * 4 = 32px
    padding: 2 * $unit;
  }
  
  .Column {
    background: green;
    height: 100px;
  }
  </code></pre>
  
  <p>There will be overflow depending on the width of the viewport but this is a desired result. My problem is to the right of the <code>.Container</code> the padding that was added doesn't render. It'll render to the top, bottom and left of the container but not on the right side.</p>
  
  <p>Here is a CodePen to illustrate the issue:</p>
  
  <p><a href="https://codepen.io/michaellee/pen/BYvowX" rel="nofollow noreferrer">https://codepen.io/michaellee/pen/BYvowX</a></p>