title: Bootstrap pull-right not working as expected
body: <p>Simple question here using <code>Bootstrap3</code>. I wanted to create a sort of small filter that reloads the page below it. My requirement was to <strong>align</strong> this filter (two inputs and a small button) with the content sitting below it, making it fall <strong>to the rightest position possible</strong>.</p>
  
  <p>I tried using <code>pull-right</code> class and indeed it pulled the filter right but there's still more room to fill. If you check the example I provided below, you'll see that <strong>my objective is to align the button with the right side of the purple row</strong>, but it fails.</p>
  
  <p>I don't really understand why this happens, but I assume that it's related to some margin/padding issues with the rows.. I'm looking for an answer explaining why this happens so I can understand the problem and won't deal with it again :).</p>
  
  <p>You can check my markup <a href="http://www.bootply.com/d3ITPWzgX2" rel="noreferrer">by clicking here on bootply</a></p>
  
  <p>Also I'll post my markup right here:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row" style="background:slateblue;"&gt;
      &lt;div class="col-xs-12"&gt;
      &lt;form role="form" class="form-horizontal"&gt;
              &lt;div class="form-group pull-right"&gt;
                   &lt;div class="col-xs-4"&gt;
                          &lt;input type="text" class="form-control text-center"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                          &lt;input type="text" class="form-control text-center"&gt;
                  &lt;/div&gt;
                  &lt;div class="col-xs-2 col-sm-2" style="margin-top:3px;"&gt;
                          &lt;button type="submit" class="btn btn-success"&gt;
                              &lt;span class="glyphicon glyphicon-refresh"&gt;&lt;/span&gt;
                          &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
        &lt;/form&gt;
        &lt;/div&gt;&lt;!-- main col 12--&gt;
    &lt;/div&gt;&lt;!--row--&gt;
    &lt;div class="row" style="background:slategrey; height:200px;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>