title: Using borders cause wrong alignment with Bootstrap 3
body: <p>I'm having a problem with Bootstrap. Look at the image below for red lines.</p>
  
  <p><img src="https://i.imgur.com/pohvCGL.png" alt="" /></p>
  
  <p><code>Jumbotron</code> is aligned little on right. It fits with image divs on header area. However, <code>borders</code> cause header area to look like they're wrongly margined. Correct look would be around -20px from left, and -20px from right, to fit on line with below.</p>
  
  <p>I've tried many things but couldn't solve the issue.</p>
  
  <p>How can I make it so the borders will correctly align with below? If using borders isn't a good idea, how can I replicate this by using other html/css tags?</p>
  
  <p>Source: <strong>using Bootstrap 3</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          @for($i = 0; $i &lt; 3; $i++)
          &lt;div class="col-xs-12 col-sm-4 col-lg-4 header-news-section"&gt;
              &lt;img src="{{ URL::to('TEST/haber.jpg') }}"class="img-rounded header-news-section-image pull-left" alt="Haber"&gt;
  
              &lt;a href="#"&gt;
                  {{ $a = rand(0, 99) }}
                  @for($y = 0; $y &lt;= $a; $y++)
                      {{ $y }}
                  @endfor
              &lt;/a&gt;
          &lt;/div&gt;
          @endfor
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12 col-sm-9"&gt;
              &lt;div class="jumbotron"&gt;
                   &lt;h1&gt;Hello, world!&lt;/h1&gt;
  ........
  
  .header-news-section {
      min-height: 60px;
      border-color: #EEEEEE #CCCCCC #CCCCCC #EEEEEE;
      border-radius: 5px 5px 5px 5px;
      border-style: solid;
      border-width: 1px;
      margin-left: 0px;
      margin-bottom: 10px;
      margin-top: -5px;
  }
  
  .header-news-section a {
      display: block;
  }
  
  img.header-news-section-image {
      height: 60px;
      width: auto;
      padding-right: 10px;
      padding-bottom: 5px;
      padding-top: 5px;
  }
  </code></pre>
  
  <p><strong>Edit:</strong> I've solved it by doing <code>&lt;div class="row" style="margin: 0px 0px 0px 0px;"&gt;</code>. Anyone knows why is it being caused in first place?</p>