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
A new guide to CSS overflow
Overflowing content
Handling Long Words and URLs [Forcing Breaks, Hyphenation, Ellipsis, etc]
https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-cont…