CSS grid inside another CSS grid displaying like parent grid

Question

I am trying to create a css grid inside another css grid look like it's parent grid. The size of the inner grid is smaller by 20 and 100 pixels but it won't align like the parent grid. Please check out the codepen. Thank you.

CODEPEN: https://codepen.io/centem/pen/oNvZLgP?editors=1100

<div class="grid-page">
  <div class="header">
    <div>HOME</div>
    <div>SEARCH</div>
    <div>LOGOUT</div>
  </div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-grid">
      <div class="inner-header">
        <div>HOME</div>
        <div>SEARCH</div>
        <div>LOGOUT</div>
      </div>
      <div class="inner-menu">MENU</div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div> 

Answer 1

Replace the class inner-grid with the inner-grid-page. No CSS is defined for inner-grid class but I can see grids defined for inner-grid-page. Let me know if it works

<div class="grid-page">
  <div class="header">
    <div>HOME</div>
    <div>SEARCH</div>
    <div>LOGOUT</div>
  </div>
  <div class="menu">MENU</div>
  <div class="content">
    <div class="inner-grid-page">
      <div class="inner-header">
        <div>HOME</div>
        <div>SEARCH</div>
        <div>LOGOUT</div>
      </div>
      <div class="inner-menu">MENU</div>
      <div class="inner-content">
        CONTENT
      </div>
      <div class="inner-footer">FOOTER</div>
    </div>
  </div>
  <div class="footer">FOOTER</div>
</div>