<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.