I am attempting to replicate the offset feature in Bootstrap's desktop grid system, where a class like .col-md-offset-3 creates an offset using margin-left.
However, in my implementation found at this link, the CSS selector does not work as intended:
.col-offset-8 {margin-left ... }
Interestingly, both of these alternatives are successful:
div.col-offset-8 {margin-left ... }
col-4.col-offset-8 {margin-left ... } /*please note: multiple class selectors with no space */
Why is it that .col-offset-8 alone fails to work?
You can view my CodePen here.
@media all and (min-width:760px) {
.row {margin:0 auto;overflow:hidden;}
.row > div {margin:10px;overflow:hidden;float:left;display:inline-block;}
.row {width:960px;}
.col-8 {width:620px} .col-4 {width:300px}
.col-12 {width:940px} .col-6 {width:460px}
.col-offset-8 {
margin-left:650px; /* = col-8 + margins */
}
}
/* for demo */
.row {background:#ccc}
.row > div {background:#eee; outline:1px solid #444}
p {font:24px/60px Arial;color:#000;text-align:center}<div class="row">
<div class="col-12">
<p>col-12</p>
</div>
</div>
<div class="row">
<div class="col-4 col-offset-8">
<p>col-4 offset-8</p>
</div>
</div>
<div class="row">
<div class="col-8">
<p>col-8</p>
</div>
<div class="col-4">
<p>col-4</p>
</div>
</div>
<div class="row">
<div class="col-12">
<p>col-12</p>
</div>
</div>