position:absolute is your issue here. This positions the boxes at 0,0 (Top left) inside it’s container so every box (without specifying left, right, top, or bottom will start at this position. i.e. all of your boxes are staked on top of each other. Avoid using position absolute where you can and let the content fall naturally and then shift it with other values like padding and margins.

They’re all there, your child boxes, but they’re stacked on top of each other occupying the same space.

.child{
  // position:absolute; <-- take this out
  position:relative; // add this one
  background: grey;
  height: 10%;
  width: 10%;
}

The position absolute means it doesn’t interact with anything else in regards to space.

The position relative means the child boxes will be positioned relative to each other.

Also: class names are separated with spaces in the HTML, so your inner boxes have 2 classes each, “box” and “child”. This is fine, you can have lots of classes, but the css you made for the box class will apply to both the outer box and the inner boxes, which I don’t think was your intention.

Try this:

<style>
body,
html {
  background-color: blue;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  height: 50%;
  width: 50%;
}

.child {
  position: relative;
  background: grey;
  height: 10%;
  width: 10%;
  border:#FF0000 1px solid;
}
</style>
<div class="container">
  <div class="box">
    <div class="box child">1</div>
    <div class="box child">2</div>
    <div class="box child">3</div>
  </div>
</div>

I’ve changed the child position from absolute to relative. As the absolute position places the each box on one-another and hence you’re unable to view all the boxes. Also, I’ve placed the “border” so that its easy to notice them.

This is a simple way to make it is to add box inside each box with smaller width and height. Hope this would help 🙂

#first {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
}
#first #second {
  width: 50%;
  height: 50%;
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#second #third {
  width: 40%;
  height: 40%;
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#third #forth {
  width: 30%;
  height: 30%;
  background: black;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="first">
  <div id="second">
    <div id="third">
      <div id="forth">
      </div>
    </div>
   </div>
</div>

body,
html {
  background-color: blue;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
  height: 50%;
  width: 50%;
}

.child {
  position: absolute;
  background: grey;
  height: 10%;
  width: 10%;
}

<div class="container">
  <div class="box">
    <div class="box child"></div>
    <div class="box child"></div>
    <div class="box child"></div>
  </div>
</div>

so I have been trying to make boxes (box child) in a box (box) but even though I copied and pasted bunch of box children, it did not let me create more than one.

It is my first time doing html so if you can explain like you explaining to a 8 y/o kid, I would appreciate.