CSS grid with padding overflows container

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.

This is almost exactly what I'm going for:

.footer {
  background-color: #2D1975;
  width: 100%;
  height: 350px;
  display: grid;
  grid-template-columns: 30% 70%;
}

.footerGridLogo {
  background-color: red;
}

.footerGridQuestions {
  background-color: green;
}

<div class="footer">
  <div class="footerGridLogo"></div>
  <div class="footerGridQuestions"></div>
</div>

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?

Demonstration of the issue:

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

<div class="footer">
  <div class="footerGridLogo">
  </div>
  <div class="footerGridQuestions">
  </div>
</div>

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.

Solution

First, instead of using percentage units use fr units. These units represent leftover space and are factored in after fixed lengths (such as padding) have been rendered.

So instead of this:

grid-template-columns: 30% 70%

Try this:

grid-template-columns: 3fr 7fr

More details:

The difference between percentage and fr units in CSS Grid Layout

Second, remove the width: 100% on the container.

.footer {
  background-color: #2D1975;
  width: 100%; <---------- remove
  height: 350px;
  display: grid;
  padding-left: 10%;
  grid-template-columns: 25% 65%;
}

When you set the .footer to display: grid it becomes (or remains) a block-level element. Such elements automatically occupy the full width of the parent.

However, if you add width: 100% to a block-level element it then adds any padding, margin and border to the calculation, resulting in an overflow. So just remove it.

Third, this whole problem can be avoided if you add the padding-left to the logo itself, and not to the grid container or grid item.