html - Bootstrap row class contains margin-left and margin-right which creates problems

Question

I am using Bootstrap 'row' class to align divs one on top of another, which works fine but

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

What I noticed is that it specifies margin-left and margin-right attributes to be -13px because of which my contents get shifted towards left. so what I have done is added another class as follows :

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
} 

This solves the purpose, but I would still like to know if there is any specific reason for 'margin-left: -15px;'. And what is the best approach to solve my problem.

Answer 1

The .row is meant to be used inside a container. Since the container has padding to adjust the negative margin in the .row, grid columns used inside the .row can then adjust to the full width of the container. See the Bootstrap docs: http://getbootstrap.com/css/#grid

Here's an example to illustrate: https://codeply.com/p/zHFaC7JR5K

So, a better solution may for you to place your .row inside a .container or .container-fluid