title: Is footer dosen't show up because of this grid?
body: <p>For some unknown reason I tried to make a gallery using Grid but the footer doesn't show up on this page, I tried on other pages footer works just to find where I'm mistaken?</p>
  <p><a href="https://i.stack.imgur.com/dPdSG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dPdSG.jpg" alt="my gallery" /></a></p>
  <p>my HTML and CSS codes:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    *{
          margin: 0;
          align-items: center;
          padding: 0 ; 
           margin-left:  auto;
           margin-right:  auto;
  
      }
       /*/****************HEADER/****************/     
      header img.ab {
          width: 35%;
          display: block;
          text-align: center;
          margin-bottom: 25px;
         
      }
      header ul {
        list-style-type: none;
        overflow: hidden;
        background-color: #FFA07A;
        width: 100%;
        text-align: center;
  
      }
  
      header ul li {
          display: inline-block;
          float: center;
  
      }
  
      header ul li a {
       display: block;
        color: white;
        text-align: center;
        padding: 10px 20px;
        text-decoration: none;
  
      }
  
      li a:hover {
        background-color: #1F1300;
      }
      .photographehead{
          text-align: center;
          padding-bottom: 100px;
      }
      hr {
          height: 12px;
          border: 0;
          box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
      }
  
      .grid-container {
        display: grid;
        grid-template-columns: 400px 400px 400px  ;
        grid-template-rows: 200px 200px 200px 200px ;
        grid-gap: 2px;
        justify-content: center;
        z-index: -999;
      }
      div img.sadlife{
          float: left;
          width:  400px;
          height: 200px;
          object-fit: cover;
          padding: 10px;
          border-radius: 25px;
      }
      .grid-container &gt; div {
        text-align: center;
        padding: 10px 0;
        padding-bottom: 200px;
        font-size: 30px;
      }
      .lightbox {
        display: none;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      .lightbox:target {
        display: block;
      }
  
      .lightbox span {
        display: block;
        width: 100%;
        height: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }
      footer.graphfooter{
          clear: both;
          position: relative;
          height: 300px;
          margin-top: -10px;
          background-color:#A2B29F ;
          text-align: center;
          line-height: 25px;   
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Salah Eddine Laouina&lt;/title&gt;
          
        &lt;link rel="stylesheet" type="text/css" href="stylephotographe.css"&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;header&gt;
          &lt;img  class="ab"src="logo.png"&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="Accueil.html"&gt; ACCUEIL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="oeuvres.html"&gt; OEUVRES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="makingof.html"&gt; MAKING OF&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="press-media.html"&gt; PRESS AND MEDIA&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="photographie.html"&gt; PHOTOGRAPHIE&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="Contact.html"&gt; CONTACT&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          
      &lt;/header&gt;
      &lt;div class="photographehead"&gt;
          &lt;h2 style="margin-top: 10px;"&gt;BORN TO SHOOT THE WORLD AROUND ME&lt;/h2&gt;
          &lt;h6&gt;Artist photographe Marocain&lt;/h6&gt;
          &lt;br&gt;
      &lt;hr&gt;
      &lt;p&gt;"La photographie est un instant qui se reflechit pas, suspendue à une fraction de seconds qui laisse à réfléchir."&lt;/p&gt;
      &lt;address class="author"&gt;-Rémy Donnadieu&lt;/address&gt;
      &lt;br&gt;
      &lt;h3&gt; SALAH EDDINE LAOUINA ARTISTE PHOTOFRAPHE MAROCAIN &lt;/h3&gt;
      &lt;/div&gt;
      &lt;div  class="grid-container"&gt;
        &lt;div&gt;&lt;a href="#p1"&gt;
          &lt;img class="sadlife"  src="photographie/photo1.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p1"&gt;
        &lt;span style="background-image: url('photographie/photo1.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;a href="#p2"&gt;
          &lt;img class="sadlife"  src="photographie/photo2.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p2"&gt;
        &lt;span style="background-image: url('photographie/photo2.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;a href="#p3"&gt;
          &lt;img class="sadlife"  src="photographie/photo3.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p3"&gt;
        &lt;span style="background-image: url('photographie/photo3.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;  
        &lt;div&gt;&lt;a href="#p4"&gt;
          &lt;img class="sadlife"  src="photographie/photo4.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p4"&gt;
        &lt;span style="background-image: url('photographie/photo4.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;a href="#p5"&gt;
          &lt;img class="sadlife"  src="photographie/photo5.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p5"&gt;
        &lt;span style="background-image: url('photographie/photo5.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;a href="#p6"&gt;
          &lt;img class="sadlife"  src="photographie/photo6.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p6"&gt;
        &lt;span style="background-image: url('photographie/photo6.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;
        &lt;div&gt;&lt;a href="#p7"&gt;
          &lt;img class="sadlife"  src="photographie/photo7.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p7"&gt;
        &lt;span style="background-image: url('photographie/photo7.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;  
        &lt;div&gt;&lt;a href="#p8"&gt;
          &lt;img class="sadlife"  src="photographie/photo8.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p8"&gt;
        &lt;span style="background-image: url('photographie/photo8.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;  
        &lt;div&gt;&lt;a href="#p9"&gt;
          &lt;img class="sadlife"  src="photographie/photo9.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p9"&gt;
        &lt;span style="background-image: url('photographie/photo9.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt;  
        &lt;div&gt;&lt;a href="#p10"&gt;
          &lt;img class="sadlife"  src="photographie/photo10.jpg"&gt;
        &lt;/a&gt;
        &lt;a href="#" class="lightbox" id="p10"&gt;
        &lt;span style="background-image: url('photographie/photo10.jpg')"&gt;&lt;/span&gt;
        &lt;/div&gt; 
        &lt;/div&gt;
      &lt;footer class="graphfooter" &gt;
          &lt;figure&gt;
        &lt;img src="biographie/salaheddinelaouina-1.png" alt="S.LAOUINA" style="width:15%"&gt;
        &lt;figcaption&gt;&lt;span&gt;S.LAOUINA&lt;/span&gt;&lt;/figcaption&gt;
              &lt;p&gt;SALAH EDDINE LAOUINA ARTISTE PEINTRE ET PHOTOGRAPHE MAROCAIN&lt;/p&gt;
              &lt;p&gt;Copyright 2020 © LAOUINA&lt;/p&gt;
        &lt;/div&gt;
        &lt;/figure&gt; 
      &lt;/footer&gt;
      &lt;/body&gt;
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>