title: trying to bring bootstrap buttons to the bottom right of the section, but it brings it outside the section instead. Why?
body: <p>So this is a bit puzzling.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.features {
    margin-top: 10px;
    min-height: 400px;
    border: 1px solid #8C8C8C;
    border-radius: 7px;
    color: #4A4A4A;
    overflow: hidden;
  }
  .bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /&gt;
  &lt;section class="features"&gt;
  
    &lt;p class='new-question'&gt;Placeholder text&lt;/p&gt;
  
    &lt;div class='row'&gt;
      &lt;div class='bottom-right'&gt;
  
        &lt;button type='button' class='btn btn-primary btn-large btn-start'&gt;Start&lt;/button&gt;
        &lt;button type='button' class='btn btn-primary btn-large btn-skip'&gt;Skip&lt;/button&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I just want the buttons to be displayed in a row at the bottom right of the feature section. But instead of doing that, they completely overshoot the section. Any ideas why?</p>
  
  <p>This is what it looks like right now (ignore the text, I generated it with js):<a href="https://i.stack.imgur.com/O5XPh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/O5XPh.png" alt="enter image description here"></a></p>