Padding on CSS grid container isn't rendering on the right side

Question

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.

This is the HTML I've got setup:

<div class="Container">
    <div class="Column"></div>
    <div class="Column"></div>
    <div class="Column"></div>
    <div class="Column"></div>
</div>

The CSS(SCSS) is:

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

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 .Container 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.

Here is a CodePen to illustrate the issue:

https://codepen.io/michaellee/pen/BYvowX