Why negative margin in .row?

Question

In the Flexboxgrid framework I see a margin of -1rem on the .row class. In small viewports this creates a small horizontal scroll of the container.

Since I've seen this negative margin on other frameworks, what is its purpose? Inner columns have a padding of the same qty, reversed.

In the picture, red line is .container, dashed line is .row. Btw the margin is visible only on the right.

Answer 1

Because you're supposed to use them in combination with columns.

Columns generally have a padding to push the contents of them away from the border, in order to make it look nicer. However, when you are nesting columns within columns, the content keeps getting pushed inwards, which is mostly not a desired effect. To keep this from happening the rows have a negative margin, which pulls the columns back. In your case, it looks like you need to add a col-xs-12 around the column groups within the rows . This will prevent the content from being pulled too far.

Take a look here for a nicely explained introduction.

Here's a demonstration of how the .row class works:

.col1 {
  background: red;
}

.col2 {
  background: green;
}

body {
  font-family: sans-serif;
}

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" type="text/css">

<div class="row">
  <div class="col-xs-12
                col1">
    <div class="col-xs-12
                col2">
      <div class="box">Without a row</div>
    </div>
  </div>
</div>

<br>
<div class="row">
  <div class="col-xs-12
                col1">
    <div class="row">
      <div class="col-xs-12
                col2">
        <div class="box">With a row</div>
      </div>
    </div>
  </div>
</div>

Answer 2

In general row is placed in container. container has padding of 15 and row has margin of -15