Dumb question about css

HTML-CSS
1

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

2

Something like this?..
html

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

css

.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
3

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

1 Like