Dumb question about css

I wanted to fit three boxes inside one big box. Can you please tell me what I am doing wrong? All help is appreciated. Here is the link https://codepen.io/newbiewebdeveloperr/pen/YdBROa?editors=1100#0

Something like this?..

<!DOCTYPE html>
   <div class="big-box">
   <div class="c c1">Child1</div>
   <div class="c c2">Child2</div>
   <div class="c c3">Child3</div>


.big-box {
   display: flex;
   background-color: grey;
   border: 3px solid red;
   padding: 10px;
   width: 300px;
   height: 400px;
   text-align: center;
.c1 {
  background-color: orange;
.c2 {
  background-color: green;
.c3 {
  background-color: cyan;
.c {
  width: 33%;
  height: 100%;

If you try to leave the text ‘Parent’ in .big-box, the css for .big-box will do with it what it does to the other elements in the box.

1 Like

Remove the “Parent” text from the outer div and you’ll be fine! Good luck

1 Like