title: CSS Grid with h1 Title
body: <p>This may seem like a really daft question, but I would really appreciate any help.</p>
  
  <p>I'm trying to create a Gallery using CSS Grid and I would like to add a h1 tag to title the page but the Grid is taking the h1 element as another image.</p>
  
  <p>This is the HTML code for the Gallery</p>
  
  <pre><code>&lt;section class="gallery"&gt;
         &lt;div class="gallery-text"&gt;&lt;h1&gt;Gallery&lt;/h1&gt;&lt;/div&gt;          
         &lt;figure class="gallery_item"&gt;
          &lt;a href="skies.html"&gt;&lt;img src="images/sky/Image%207%20small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              Skies Above!
          &lt;/figcaption&gt;
         &lt;/figure&gt;
  
         &lt;figure class="gallery_item"&gt;
          &lt;a href="seaviews.html"&gt;&lt;img src="images/sea/20171117_161159%20small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              Beautiful Seaviews!
          &lt;/figcaption&gt;
         &lt;/figure&gt;
  
         &lt;figure class="gallery_item"&gt;
          &lt;a href="nature.html"&gt;&lt;img src="images/nature/Image%209%20small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              Nature
          &lt;/figcaption&gt; 
         &lt;/figure&gt;
  
          &lt;figure class="gallery_item"&gt;
          &lt;a href="seaside.html"&gt;&lt;img src="images/seaside/20171125_131003_small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              By the Seaside
          &lt;/figcaption&gt; 
         &lt;/figure&gt;
  
         &lt;figure class="gallery_item"&gt;
          &lt;a href="cities.html"&gt;&lt;img src="images/cities/20170915_191853%20small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              Cities
          &lt;/figcaption&gt; 
         &lt;/figure&gt;
  
         &lt;figure class="gallery_item"&gt;
          &lt;a href="abstract.html"&gt;&lt;img src="images/abstract/Image%2015%20small.jpg" alt="" class="gallery-image"&gt;&lt;/a&gt;
          &lt;figcaption class="gallery_image-caption"&gt;
              Something Different
          &lt;/figcaption&gt; 
         &lt;/figure&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>CSS code</p>
  
  <pre><code>section{
  
      display: grid;
      grid-gap: 10px;
      grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
      grid-template-rows: auto;
  
  }
  
  section h1{
      text-align: center;
  }
  
  .gallery_item{
      box-sizing: border-box;
      margin: auto;
      width: 100%;
      padding: 1rem;
      box-shadow: 1px 2px 40px 2px rgba(160,160,160, .5);
  }
  
  .gallery-image{
      width: 100%;
      display: block;
  }
  
  .gallery{
      width: 100%;
      grid-column: 1 / -1;
      display: grid;
      grid-gap: 12px;
      grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
      grid-template-rows: auto;
      margin: auto;
  
  }
  
  .gallery_item img{
      height: 250px;
  }
  </code></pre>
  
  <p>I'm just not sure how to target the <code>h1</code> element.</p>