<div class="background-wrap">
    <h1 class="heading">The Hutchins Clan</h1>    
    <div class="home-page">
      <div class="navbar">menu
        <p>Hutchins Lineage</p>
        <p>Personal Pages</p>
        <p>Phyllis' Scrapbook</p>
      </div>  
      <div class="parents-photo-heading photo-heading">Healy and Pa
      </div>
      <div class="parents-photo"><img src="images/healy-and-pa.jpg" alt="Parents" class="parents-photo">
      </div>
      <div class="parents-photo-caption photo-caption">Standing in front of their home at 527 N. East St., Raleigh, NC, ca. 1956
      </div>
      <div class="family-photo-heading photo-heading">The Family
      </div>
      <div class="family-photo">
      </div>
      <div class="family-photo-caption photo-caption">The <u>only</u> photo ever taken of the whole family
      </div>
    </div> <!--   End of .home-page   -->
  </div>  <!--  END of .background-wrap   -->

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 1rem;
}

.background-wrap {
  max-width: 1480px;
  margin: 1rem auto;
  padding: 1rem 1rem 2rem;
  background-color:  rgb(234, 217, 201);
  border: 3px solid #999;
  border-radius: 20px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5);
  font-family: birthstone;
}

h1.heading {
  margin-top: -.5rem;
  font-size: 5rem;
  font-weight: normal;
  text-align: center;
} 
h2.subheading {
  font-size: 3rem;
  font-weight: normal;
  text-align: center;
}

.home-page {
  display: grid; /* 3 rows / 3 columns*/
  gap: 1rem 3rem;
  grid-template-columns: 0.4fr .6fr 1.25fr;
  grid-template-rows:
}

.navbar {       /*  row 1 / column 2  */ 
  grid-row: 2;
  grid-column: 1;
  padding: .95rem 1rem 1rem 1.1rem;
  font-size: 1.125rem;
  text-align: left;
  border: 3px solid #999;
  border-radius: 10px;
}

.parents-photo-heading {  /*  row 1 / column 2  */  
  grid-row: 1;
  grid-column: 2;
}

.parents-photo {  /*  row 2 / column 2  */ 
  grid-row: 2;
  grid-column: 2;
}

.parents-photo-caption {
  grid-row: 3;
  grid-column: 2;
}

.family-photo-heading {   /*  row 1 / column 3  */
  grid-row: 1;
  grid-column: 3;
}

.family-photo {   /*  row 2 / column 3  */
  grid-row: 2;
  grid-column: 3;
  height: auto;
}

.family-photo-caption {
  grid-row: 3;
  grid-column: 3;
}

.photo-heading {
  font-size: 3.0rem;
  text-align: center;
}  

.photo-caption {
  font-size: 1.5rem;
  text-align: center;
  line-height: .95;
}