offset not working right

[ezmiller]

Hi, I'm using your grid, but there's a css rule that is breaking the offset-by-* classes. The

/* For devices larger than 550px */
@media (min-width: 550px) {
  .container {
    width: 80%; }
  .column,
  .columns {
    margin-left: 4%; }
  .column:first-child,
  .columns:first-child {
    margin-left: 0; }

The rule in question is the margin-left override for .column:first-child and .columns:first-child. I have a single column container inside a row, like this:

<section class="intro">
    <div class="branding-wrap row">
        <div class="branding column two-thirds offset-by-two">
            <h1 class="logo">Rethinking Crisis Conference</h1>
        </div>
    </div>
</section>

Here the offset is not working because .branding is a .column:first-child. I can't understand the purpose for the override here. If I remove it, the grid work as expected, but am I going to break something elsewhere? What's the reason for this override?

[ezmiller]

Anyone have any insight here?

[CodeZombie]

every column in a row has a 4% margin between it and the one to it's left. The first column in a row has no column to its left, and so it needs no margin. the .column:first-child, columns:first-child{ margin-left: 0; } rule does just that. If you remove it, all your rows will be pushed 4% too far to the right, and it will break the entire flow of the grid. So don't remove it.

This rule should have no effect on the offset-by-* classes, as it appears before them in the CSS, and should be overriden properly, not the other way around.

I tried running your code, and it runs as expected with skeleton v2.0.4

[gld1982ltd]

Try your code with Skeleton Framework.