<div class="container">
        This container is also subject to box-model issues. This has no width. Once you set the width (even too 100%) it will add the padding and border stretching the box off the page - like the second one below.
        <div class="default-box">Default and no width set - all is well.</div>
        <div class="content-box">box-sizing:content-box; ~ Set width and the browser adds the padding and margin to the specified width. =></div>
        <div class="border-box">box-sizing:border-box; ~ Specified width (100%) is the sum of <em>content + padding + border</em> and no bigger.</div>
        <div class="content-box-no-width">box-sizing:content-box; ~With no specified width,  will measure the same as border-box.</div>
      </div>
$body-bg: #444;
$pri: #333;
$pri-dark: darken($pri, 20%);
$sec: #444;
$ter: #666;
$ter-dark: darken($ter, 20%);
body { 
  margin: 0;
  padding: 0;
  padding: 1em;
  background-color: #333;
}
.container { 
  font-size: 1.2em;
  font-family: arial;
  color: black;
  border: 1em solid $pri-dark;
  padding: 1em;
  background-color: #C0BA96;
}
.container > div {color: #fff; }
.default-box { 
  background-color: $ter;
  padding: 1em;
  border: 1em solid $ter-dark;
}
.content-box { 
  box-sizing: content-box;
  background-color: gray;
  padding: 1em;
  border: 1em solid $sec;
  width: 100%;
}
.content-box-no-width { 
  box-sizing: content-box;
  background-color: gray;
  padding: 1em;
  border: 1em solid $sec;
}
.border-box { 
  box-sizing: border-box;
  background-color: gray;
  padding: 1em;
  border: 1em solid $pri-dark;
  width: 100%;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.