Why isn't my child element contained inside the parent?

September 28, 2022

I just started learning CSS and I am having trouble understanding this. I have set both the margin and the padding to 0 (I am also using this CSS reset, so I think this is redundant – http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/).

But for some reason the right side of the child box goes outside the parent. here is my CSS code. cal is the parent

#cal {
  border: 5px solid black;
  width: 30%;
  height: 600px;
  margin: 0;
  padding: 0;
}

#screen {
  width: 100%;
  border: 5px solid black;
  padding: 0;
  margin: 0;
}

<div id="cal">
  <div id="screen"></div>
</div>

And the result, at the right edge…

But then, when I use box-sizing:border-box, now the elements line up how I want. I don’t understand why

>Solution :

Your child element is overflowing because you gave it a 100% with plus an additional 5px border

Solution 1 – using calc

Removing 5px from the 100%

width: calc(100% - 5px);

Solution 2 – changing the box-sizing property

Using box-sizing: border-box;

You commonly see people changing the box-sizing from content-box to border-box. This basicly makes it so the padding and border are both included in the width property.

Learn more at: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing