Липкий заголовок, закрывающий часть содержимого

Question

Заголовок Иллюстрации имеет липкую позицию и покрывает часть изображений при прокрутке. Я хочу, чтобы там было написано: «Иллюстрация, чтобы переместиться вниз через тот div, который он покрывает. Кто-нибудь знает, как я могу это исправить? Извините, если мой код трудно читать, я довольно нов. Спасибо за помощь .

body{
  font-family: montserrat;
background-color: #70C1B3;
  color: white;
 
  
 
}

#paint{
  font-size: 7rem;
  
}

.resume{
  text-align: right;
}
.name{
  text-align: center;
}

.h1{
  display: flex;
  justify-content: center;
}

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  width: 100%;
  height: 15%;
  background-color: #247BA0;;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
   text-align: center;
  
}
.container {
  height: 800px;
}

.extra, .container {
  width: 100%;
  background-color: grey;
  margin: auto;
}

#container{
  height: 800px;
  width: 100%;
  background-color: grey;
  margin: auto;
  font-size: 2rem;

}


.extra {
  height: 200px;
  width: 100%;
  
}

.wrapper{
display: grid;
  grid-template-column: 1fr 1fr 1fr;
  grid-template-row: auto;
  background-color: orange;
  height: 100%;
  grid-gap: 5px;
  border: solid 2px;
  grid-template-areas:
    
    "a b c"
    "d e f";
}
  @media (max-width: 700px) {
  .wrapper {
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f";
  }

}

.box a {grid-item: a}
.box b {grid-item: b}
.box c {grid-item: c}
.box d {grid-item: d}
.box e {grid-item: e}
.box e {grid-item: f}
    
.box {
  background-color: yellow;
  border: solid 2px
}

#containercontainer {
  width: 100%;
  height: 20%;
}

#sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  margin: 0;
  width: 100%;
  height: 20%;
  background-color: #31c39c;;
  display: flex;
  justify-content: center;
  align-items: center;
}

#wrapper{
display: grid;
  grid-template-column: 1fr 1fr 1fr;
  grid-template-row: auto;
  background-color: orange;
  height: 100%;
  grid-gap: 5px;
  border: solid 2px;
  grid-template-areas:
    
    "a b c"
    "d e f";
}
  @media (max-width: 700px) {
  #wrapper {
    grid-template-areas:
      "a"
      "b"
      "c"
      "d"
      "e"
      "f";
  }

}

.box a1 {grid-item: a}
.box b1 {grid-item: b}
.box c1 {grid-item: c}
.box d1 {grid-item: d}
.box e1 {grid-item: e}
.box e1 {grid-item: f}

 <div class="d4"> <p class="resume">Resume</p>
    <h1 class="name">Title</h1></div>
  <div class="d7"><h1 id="paint">Paint. Pencils. Pixels.
Code. Screen Printing.
Photography.</h1></div>

<br />
<div class="container">

  <div class="sticky"><h1>Traditional Art</h1></div>
 <div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
</div>
</div>

<div id="containercontainer">
<div id="container">
  <div id="sticky"><h1>Illustrations</h1>
  </div>
     <div id="wrapper">
  <div class="box a1">A</div>
  <div class="box b1">B</div>
  <div class="box c1">C</div>
  <div class="box d1">D</div>
  <div class="box e1">E</div>
  <div class="box f1">F</div>
</div>
  </div>
  </div>
</div>
  <br />