html css twitter-bootstrap-3 alignment grid-layout

Getting rid of padding or marging from bootstrap columns

I'm using bootstrap (version 3.3.6) for the first time to make my site. Readed the docs and start to code. Excluding the <link>'s the code below is my site's structure:

<body>
<div class="container">
    <div class="row">
        <div class="col-sm-2 col-md-2 col-lg-2 col-lg-pull-1">
            <div class="loader">
                <div class="loader-bg">
                    ...
                </div>
            </div>
        </div>
        <div class="col-sm-10 col-md-10 col-lg-10 col-lg-push-1">
            <div class="black-box">
                <p class="info-message">Coming <span>VERY</span> soon!</p>
                <p class="text-message">Until then, my contacts:</p>
               ...
            </div>
        </div>
   </div>
</div>

Using push and pull classes I thought I was removed padding for the columns. Setting the main div with 'class="container"' I have the result:

Changing to 'class="container-fluid"' the behavior remains strange. Notice shapes overlapping page:

What I want in my results is: the circle and rectangle (both are divs) remains aligned to the edges of the page (left and right) with no padding or marging. Following docs until now doesn't work. What this behavior occurs?

Solution

by default col-* have padding so you just need to reset them

[class^="col"] {
  padding: 0
}
[class$="-2"] {
  background: orange
}
[class$="-10"] {
  background: grey
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
      <div class="loader">
        <div class="loader-bg">
          ...
        </div>
      </div>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10">
      <div class="black-box">
        <p class="info-message">Coming <span>VERY</span> soon!</p>
        <p class="text-message">Until then, my contacts:</p>
        ...
      </div>
    </div>
  </div>