Css Grid Nested Divs - Bottom Row of Nested Divs won't fill Larger Div

Question

I'm fairly new to web design but have been trying to get a baseball research website up which has finally brought me around to code. I put in the CSS grid layout to some success but have had a persistent bug with my nested item or main content on my "Home" Page. It keeps coming up or looming large with other tasks on the site and needs to be corrected. These boards are great and I'd appreciate any help. Thank you. Here's the issue and code:

I have a responsive layout that uses media queries for 3 different screen sizes >700px, <500px and <700 px. In my main center column, there is the 2x2 "content" div which has 4 grid areas within it. The issue is, the bottom row of nested divs does not extend to the bottom of the parent div, which is exasperated when divs get to certain heights.

In the attached picture, you can see the border of the larger "content" div in black with the nested semi-transparent white nested divs stopping well before the black border. Margin-bottom has been set to 0 in about any css class I can think of. Code attached as well, but I'm also new at the intensive code post here so don't know the best way to do it :) Loving coding so far. Thanks all!

* {
  box-sizing: border-box;
}

.wrapper {
  background-image: url(oceanfull.PNG);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  max-width: 100%;
  margin: 0;
  font: 1.2em Helvetica, arial, sans-serif;
  height: 100%;
}

.wrapper>* {
  border: 2px solid black;
  background-color: rgba(255, 255, 255, .7);
  border-radius: 5px;
  padding: 0px;
}

.wrapper h1 {
  font-size: 30px;
  text-align: center;
  padding: 0px;
}

a:hover {
  text-decoration: underline;
  background-color: rgb(28, 224, 238);
}

.main-head {
  grid-area: header;
  background-image: url(ray.png);
  display: grid;
  grid-auto-rows: minmax(100px, auto);
  height: 15vh;
  grid-template-columns: 1fr 4fr 1fr;
  gap: 0px;
  padding: 0px;
  grid-template-areas: "leftop centertop righttop";
}

.main-head h1 {
  margin-top: 50px;
  margin-bottom: 0px;
  background-color: blue;
  border: solid black;
}

.leftop {
  grid-area: leftop;
  border: solid green;
}

.lefttop img {
  height: 40%;
  width: 100%;
  position: relative;
  top: 60%;
  right: 10%;
}

.centertop {
  grid-area: centertop;
  display: flex;
  flex-direction: row;
  margin: auto;
  position: relative;
  top: -50%;
}

.righttop {
  grid-area: righttop;
}

.righttop img {
  height: 60%;
  width: 100%;
  position: relative;
  top: 40%;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
  gap: 10px;
  height: 100%;
  padding: 0px;
  grid-template-areas: "one one" "three four";
  padding-bottom: 0px;
  background-color: rgba(255, 255, 255, 0.0);
  border: solid black;
}

.wrapper article div {
  height: 100%;
  border: 1px solid black;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 12px;
}

.one {
  grid-area: one;
  word-wrap: break-word;
  padding-left: 8px;
  padding-top: 8px;
  height: 100%;
}

.one img {
  border-radius: 12px;
  float: right;
  clear: right;
}

.three {
  grid-area: three;
  height: 100%;
}

.three h4 {
  margin-bottom: 1vh;
  margin-top: 1vh;
}

.three ul {
  list-style-type: auto;
  padding-left: 20px;
  padding-right: 5px;
}

.three ul li {
  padding-bottom: 15px;
}

.four {
  grid-area: four;
  height: 100%;
}

.main-nav {
  grid-area: nav;
}

.main-nav ul {
  font-size: 24px;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.main-nav ul li {
  padding-bottom: 0vh;
}

nav ul {
  margin: 0;
  padding: 0;
}

.side {
  grid-area: sidebar;
  font-size: 2.5vh;
}

.side p {
  margin-bottom: 0px;
  padding-left: 4px;
}

.ad {
  grid-area: ad;
  padding: 0px;
}

.main-footer {
  grid-area: footer;
  padding: 0px;
}

.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: "header" "nav" "content" "sidebar" "ad" "footer";
}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: "header  header" "nav     nav" "sidebar content" "ad      content" "footer  footer";
  }
  nav ul {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: "header header  header" "nav    content sidebar" "nav    content ad" "footer footer  footer";
  }
  nav ul {
    flex-direction: column;
  }
  .main-nav ul li {
    padding-bottom: 5vh;
  }
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>BBsite</title>
  <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
  <div class="wrapper">
    <header class="main-head">
      <div class="lefttop">

      </div>

      <div class="centertop">
        <h1>The Site</h1>
      </div>

      <div class="righttop">

      </div>

    </header>

    <nav class="main-nav">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="pages/lineup.html">Lineup</a></li>
        <li><a href="pages/articles.html">Articles</a></li>
      </ul>
    </nav>
    <article class="content">
    
      <div class="one">
        <img src="morsecrazy.jpg" alt="morsecrazy">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, nemo minus ad nisi debitis a in aliquam reiciendis iure libero vero totam laboriosam quidem, animi esse, itaque doloribus dolore culpa doloremque. Maxime soluta laboriosam commodi,
          itaque facilis qui doloremque aliquid non quisquam placeat eveniet ipsum fugiat voluptates culpa ad dolor?</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>

        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi adipisci ipsam facere veritatis fugit error ab fugiat! Ea, illum laudantium?</p>


      </div>
      <div class="three">
        <h4>The Old Recent Research/Articles/Charts</h4>
        <ul>
          <li>Data Thing</li>
          <li>You Won't Believe Thing</li>
          <li>Article Thing</li>
          <li>Thing Another</li>
          <li>Thing</li>
        </ul>
      </div>
      <div class="four">4</div>
    </article>
    <aside class="side">
      <h2>Lineup</h2>
      <p>C - Guy Catcher</p>
      <p>1B - First Basemanman</p>
      <p>2B - Double Base</p>
      <p>3B - 3B</p>
      <p>SS - The Shortstop</p>
      <p>LF - Left the what?</p>
      <p>CF - Rover</p>
      <p>RF - Bobby Abreu</p>
      <p>DH - DH</p>
    </aside>
    <div class="ad">
      <p>ad</p>

    </div>
    <footer class="main-footer">The footer</footer>

  </div>

HTML:

<article class="content">
            <div class="one">
              <img src="morsecrazy.jpg" alt="morsecrazy">
              <p>Loremssss<p>

   </div>
        <div class="three">
            <h4>The Old Recent Research/Articles/Charts</h4>
            <ul>
                <li>Data Thing</li>
                <li>You Won't Believe Thing</li>
                <li>Article Thing</li>
                <li>Thing Another</li>
                <li>Thing</li>
            </ul>
        </div>
        <div class="four">4</div>
    </article> 

CSS:

.content {
grid-area: content;
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(100px, auto);
gap: 10px;
padding: 0px;
grid-template-areas: 
    "one one"
    "three four";
padding-bottom: 0px;
background-color: rgba(255, 255, 255, .0);
border: solid black;}

.one {
    grid-area: one;
    word-wrap: break-word;
    padding-left: 8px;
    padding-top: 8px;
    height: 100%;
  }

.one img {
  border-radius: 12px;
  float: right;
  clear: right;
  }
.three {
    grid-area: three;
  }
.three h4 {
    margin-bottom: 1vh;
    margin-top: 1vh;
  }
.three ul {
   list-style-type: auto;
    padding-left: 20px;
    padding-right: 5px;
  }
.three ul li {
  padding-bottom: 15px;
}
  .four {
    grid-area: four;
  }




.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-areas: 
    "header"
    "nav"
    "content"
    "sidebar"
    "ad"
    "footer";}

@media (min-width: 500px) {
  .wrapper {
    grid-template-columns: 1.5fr 4.5fr;
    grid-template-areas: 
      "header  header"
      "nav     nav"
      "sidebar content"
      "ad      content"
      "footer  footer";}
  nav ul {
    display: flex;
    justify-content: space-between;}
}

@media (min-width: 700px) {
  .wrapper {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-areas: 
      "header header  header"
      "nav    content sidebar"
      "nav    content ad"
      "footer footer  footer"}
   nav ul {
     flex-direction: column;
     }
   .main-nav ul li {
    padding-bottom: 5vh;}
}

Solutions/Things I've tried that haven't worked:

-Is height 100% in a certain class a problem or lacking somewhere?

-list-style type in .three ul?

-My Media Queries have a different split of Rows/Columns than what's written in the "content" CSS class?**(big one)

-other weak remedies :)

**The very presence of "grid-areas" for that nested div is maybe unnecessary or the problem? Initially, the 2x2 grid I wanted there wouldn't fill the top left div and just shift everything one, so I made the grid-areas within grid areas----but there are different layouts for the media query/Responsive layout?

So in short, why aren't the nested divs "three" and "four" filling up the entirety of their div? Its margin-bottom really want to be 0! Thank you. Please let me know if I can provide anything to assist.

IMAGE!!!! nested divs "three" and "four" don't fill their parent div (border of larger div in black)

Answer 1

The issue seemed to be in the HTML of the code. I've now posted a "Run Code Snippet" that should differ from what I originally pasted in.

Indentation or formatting issues in the HTML seemed to be the issue (?). I ran my code through JS Fiddle to post here, and the "Scrub" option I believe minorly altered the formatting of my HTML and I guess worked! Apologies for the squished CSS code }s, but I didn't want to post a super tall post. That wasn't the issue though. Indenting of items in the HTML i guess resulted in a nested div not fully filling its nest?

Thank you all

Answer 2

You might have missed setting property height: 100% in div with class "three" and class "four".