Как убрать отступы?

/* grid container */

.holy-grail-grid {
  display: grid;
  grid-template-areas: 'header' 'main-content' 'left-sidebar' 'right-sidebar' 'footer';
}


/* general column padding */

.holy-grail-grid>* {
  padding: 0rem;
}


/* header */

.holy-grail-grid>.header {
  grid-area: header;
  background: #f97171;
}


/* main-content */

.holy-grail-grid>.main-content {
  grid-area: main-content;
  background: #fff;
}


/* left-sidebar */

.holy-grail-grid>.left-sidebar {
  grid-area: left-sidebar;
  background: #f5d55f;
}


/* right-sidebar */

.holy-grail-grid>.right-sidebar {
  grid-area: right-sidebar;
  background: #c5ed77;
}


/* footer */

.holy-grail-grid>.footer {
  grid-area: footer;
  background: #72c2f1;
}


/* tablet breakpoint */

@media (min-width:768px) {
  .holy-grail-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 'header header' 'main-content main-content' 'left-sidebar right-sidebar' 'footer footer';
  }
}


/* desktop breakpoint */

@media (min-width:1024px) {
  .holy-grail-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas: 'header header header header' 'left-sidebar main-content main-content right-sidebar' 'footer footer footer footer';
  }
}

<div class="holy-grail-grid">
  <!-- HEADER -->
  <header class="header">
    Header
  </header>

  <!-- main-content -->
  <main class="main-content">
    <p>Main content</p>
  </main>

  <!-- left-sidebar -->
  <section class="left-sidebar">
    Left sidebar
  </section>

  <!-- right-sidebar -->
  <aside class="right-sidebar">
    Right sidebar
  </aside>

  <!-- FOOTER -->
  <footer class="footer">
    Footer
  </footer>

</div>