Why is my CSS Grid going clockwise?

Question

I've been all over the internet trying to get this one fixed with no luck! I have done several of the CSS grid concepts ie. grid-template-areas and relying on the auto row function. Now I have tried to lay out the columns and the rows as simply as possible and my grid is simply moving in a clockwise direction instead of layering on each other properly!

<header>
    <h1>
        <a href="CauldronHtml.html">Cauldron Luxury Bath</a>
  </h1>
</header>
<nav>
  <ul id="banner">
    <li class="btn"><a href="#">Products</a></li>
  </ul>
</nav>
<div id="prodImage">
  <img src="PictureDefault.png" alt="Image 1" id="prodImage1" />
  <img src="PictureDefault.png" alt="Image 2" id="prodImage2" />
</div>
<div id="prodInfo">
  <p id="prodInfo1">Here is the information about product numero uno. It is quite the heck of the product, eh? Buy buy buy!</p>
  <p id="prodInfo2">Here is the information about product numero uno. It is quite the heck of the product, eh? Buy buy buy!</p>
</div>
<footer>
  <ul class="footer">
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="footer">
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
    <li><a href="#">Facebook</a></li>
  </ul>
</footer>


/* CSS */

body {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-column-gap: 10px;
}
h1 {
  grid-column: 1 / span 3;
  grid-row: 1 / span 1;
}
#banner {
  grid-column: 1 / span 3;
  grid-row: 2 / span 1;
}
#prodImage1 {
  grid-column: 1 / 2;
  grid-row: 3 / span 1;
}
#prodImage2 {
  grid-column: 2 / 3;
  grid-row: 3 / span 1;
}
#prodInfo1 {
  grid-column: 1 / span 1;
  grid-row: 4 / span 1;
}
#prodInfo2 {
  grid-column: 2 / span 1;
  grid-row: 4 / span 1;
}
footer {
  grid-column: 1 / span 3;
  grid-row: 5 / span 1;
}