title: Why do form-groups have a negative margin in Bootstrap?
body: <p>I have this very simple code using Bootstrap 3:</p>
  
  <pre><code>&lt;html&gt;
    &lt;body&gt;
      &lt;main class="container" role="main"&gt;
        &lt;form class="simple_form form-horizontal"&gt;
           &lt;div class="form-group text required campaign_url"&gt;
             &lt;label class="text required control-label" for="campaign_url"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt; Url&lt;/label&gt;
             &lt;textarea class="text required form-control" name="campaign[url]" id="campaign_url"&gt;&lt;/textarea&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>and it appears like this:</p>
  
  <p><img src="https://i.stack.imgur.com/c6uzO.png" alt="enter image description here"></p>
  
  <p>Notice how tho labels and the inputs are sticking to the left. Inspecting those elements I found this:</p>
  
  <pre><code>.form-horizontal .form-group {
    margin-left: -15px;
    margin-right: -15px;
  }
  </code></pre>
  
  <p>Why is that there? I know it's trivial to remove, but it makes me wonder whether the way I'm using Bootstrap is wrong. How should I use it?</p>