How is .row class defined in Bootstrap?

When I searched .row in bootstrap.css file I got the following definitions:

...
.row:before,
.row:after,
... {
  display: table;
  content: " ";
}

...
.row:after  
... {
  clear: both;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

With these definitions I expect the .row class to behave as following:

• Before and after any row there should be block level element encompassing one white space . The white space before .row should not be cleared and the white space after .row. should be cleared. -- None of this happen actually.

• Any div element with class .row should spread 15px out of its containing element to both left and right. -- This is observable with usual containing divs but not with body element. E.g. if there are two divs woth class row inside the body element:

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css");  

 .row div:nth-of-type(even) {
  background-color: darkgray
}
.row div:nth-of-type(odd) {
  background-color: lightgray
}

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

As can be seen the text doesn't goes out to the left of the viewport by 15px. Moreover both the rows are rendering without any gap in between. What happened to the .row:after {display: table; content: " ";}?

Please explain.

P.S: I don't know how the @import url at-rule work in SO editor.