CSS children grid container not inheriting from parent grids - css

Question

I have this (Erb) HTML:
<article class="grid-container">
<header class="grid-centered">
<h1><%= #post.title %></h1>
</header>
<div class="content grid-reading grid-item-max grid-container">
<%= markdown(#post.body) %>
</div>
</article>
The <%= >% will run the code in between and output HTML strings.
And CSS:
.grid-container {
display: grid;
grid-template-columns: repeat(24, 1fr);
}
.grid-centered {
grid-column: 4 / span 18;
}
.grid-reading {
grid-column: 6 / span 14;
}
.grid-item-max {
grid-column: 1 / -1;
}
.content p {
grid-column: 6 / span 14;
}
Two posts follow with same content but different render results.
Working:
---
layout: post
title: Works
url: works
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Working screenshot:
Not working content:
---
layout: post
title: Works
url: works
---
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Not working screenshot:
The not working one's grid got squeezed.
I tried on codepen, but cannot reproduce it:
https://codepen.io/JuanitoFatas/pen/KKwdjMx
Two pages of same content renders differently with same HTML and CSS.
Any pointer or debugging advice? Thanks!
Using Firefox 71.0 on macOS 10.15.1 (Safari 13.0.3 also has this same problem :/)

Answer 1

Turns out the not working post I actually have some nested elements in the bottom of the page that I do not have the CSS to control them fall within the grid, so they're off the grid and resulted in above squeezed grid columns. Sorry for oversimplify the question here.