title: CSS grid with padding overflows container
body: <p>I am trying to create a footer whose width is 100% (of the body). On the left side of the footer, I want a logo. On the right side of the footer, I want some text. So I decided to try to use CSS grid.</p>
  
  <p>This is almost exactly what I'm going for:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.footer {
    background-color: #2D1975;
    width: 100%;
    height: 350px;
    display: grid;
    grid-template-columns: 30% 70%;
  }
  
  .footerGridLogo {
    background-color: red;
  }
  
  .footerGridQuestions {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;div class="footerGridLogo"&gt;&lt;/div&gt;
    &lt;div class="footerGridQuestions"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, I want to add some padding to the left of the grid, let's say 10%, so that the logo isn't so close to the left edge. So instead of a 30-70 split, I try a 10-25-65 split. However, the grid ends up overflowing. Why is that?</p>
  
  <p>Demonstration of the issue:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.footer {
    background-color: #2D1975;
    width: 100%;
    height: 350px;
    display: grid;
    padding-left: 10%;
    grid-template-columns: 25% 65%;
  }
  
  .footerGridLogo {
    background-color: red;
  }
  
  .footerGridQuestions {
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="footer"&gt;
    &lt;div class="footerGridLogo"&gt;
    &lt;/div&gt;
    &lt;div class="footerGridQuestions"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I realize that just adding another grid item of 10% instead of padding solves my problem, but I'm curious why padding doesn't work the same way.</p>