Two CSS Grids not Aligning Within the Same Parent Container - html

Question

I have two separate CSS grids within the same parent container.
The first of the 2 grids has the column property grid-template-columns: 1fr 2fr;
The second of the 2 has grid-template-columns: 1fr 1fr 1fr;
Yet somehow the grids aren't quite lined up - the text in the top grid needs to start in the second column (as shown), but it's ever so slightly out of alignment with the grid below, which is being cause by the column sizing.
I could really do without putting them both within the same grid because of the site design.
Is there anyway to get them to align with CSS Grid syntax without placing them both within the same grid?
Codepen: https://codepen.io/emilychews/pen/qzvPqJ
body {
margin: 0;
padding: 0;
}
.grid-section {
display: flex;
flex-direction: column;
align-items: center;
}
.row {
width: 80%;
max-width: 1250px;
}
.grid-column {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
/* adds space to main grid title*/
.grid-row.row-1 .grid-column {
margin: 5rem 0;
grid-template-columns: 1fr 2fr
}
.grid-image {
height: 10rem;
width: 100%;
background: lightblue;
}
h4.grid-heading {
margin: 1rem 0 0 0;
}
.grid-text {
position: relative;
padding: 0 1rem 0 0;
margin: 0 0 1rem 0;
}
<section class="section grid-section section-2">
<div class="row grid-row row-1">
<div class="one-col grid-column column-1">
<div class="grid-heading"></div>
<div class="grid-heading">
<h3 class="grid-title">Focused on the Issues That Affect You.</h3>
</div>
</div>
</div>
<div class="row grid-row row-2">
<div class="one-col grid-column column-1">
<div class="home-grid grid-item-1">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading family">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="arrow-wrapper"></div>
</div>
</div>
<div class="home-grid grid-item-2">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading employment">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-3">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading residential-property">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-4">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading wills">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-5">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading landlord">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-6">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading litigation">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-7">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading commercial-property">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-8">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading business-affairs">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="home-grid grid-item-9">
<div class="grid-image"></div>
<div class="grid-text">
<h4 class="td grid-heading media">Lorem</h4>
<hr>
<p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
</section>

Answer 1

On the first grid, instead of this:
.grid-column {
display: grid;
grid-template-columns: 1fr 2fr;
}
Consider this:
.grid-column {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* or even grid-template-columns: 1fr */
text-align: center;
}
revised codepen

Answer 2

The reason of the missalignment is that in the first grid you have only one gap, in the second you have 2.
One posibility is to set the column property of the first grid to
grid-template-columns: 1fr 2fr 1px;
Now, the second item can no loger reach the rightmost border, but the missalignment is only a fraction of a pixel.