Overflowing items

When an element is larger than it's container, it will overflow.

CSS div overflow example

When an element is set to max-width: 100%, it can still overflow it's container if it has margin or it's own internal padding. Set box-sizing: border-box; to make it the correct width.

https://codepen.io/mortona42/pen/yLRbrXo

https://codepen.io/mortona42/pen/vYayVJw?editors=1111

Margin bleed

https://codepen.io/mortona42/pen/OJqwGNj

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Level
Beginner
Topics
#Front End Development
Resources