Set default box-sizing to border-box

[tronsha]

If you make a responsive design the container is wider than 100%.

.container {
  max-width: 100%; 
  padding: 20px;
}

This fixes the problem.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

[MoOx]

I've to admit that would be nice. But this rule is more like a reset. So don't have a place in normalize.css.

[necolas]

That would change the browser default and have cascading consequences, affecting the layout of every element in the page. Not suitable for the project.

[ramasilveyra]

And if use this version?

html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

The best is preserve inheritance. I hope you consider it's a very common problem.

More:

• CSS Tricks Article
• Treehouse comment

[battaglr]

@ramasilveyra: that code does the same thing after all: modifies the default box-model; and normalize.css it's not about that.

I understand how useful this is, I use it all the time. But that belongs in your codebase. 😉