This got real confusing with the border-box stuff at the end. Also, the overflowing we weren't showed before.

Try not to advance through the videos so quickly. Practice is the key to retaining what you have learned.

The box-sizing property controls how the css box model's dimensions are calculated through the browser.

The default value is content-box, which means that any padding and border values defined on the box will be added to the overall width of the element.

If you have a specific sized element that you want to stay at that size without getting any larger in width or height, then it would be a pain to have to do some math calculations to get that size if you have added any border or padding.

Therefore, CSS introduced a new value for this property to save us from the dirty math work called border-box. The value border-box adds any borders and padding inside the element instead of outside to add it to the total width/height of the elements defined size.

For example:

You have an element that you have given a defined width of 300px. You add padding and a border to that element to give it some breathing room and visual appearance.

Without the border-box value, this element would expand its defined 300px value size. We don't want that, we want the box to remain our defined size, so we add the property box-sizing and the value border-box.

.content {
  width: 300px;
  padding: 20px 10px;
  border: 1px solid orange;
  box-sizing: border-box;
}

The overflow property controls content overflowing the boundaries of an element with a defined height. The overflow property is also useful for clearing floats. Although scroll bars may appear, the best method for clearing floats is to use a clearfix.

You can find out information about both box-sizing and overflow properties through the CSS Basics course.

Hope this helps.