title: Why is my text overflowing into my bootstrap row and pushing it down?
body: <p>This is my first post here but I felt the need to ask this question because I've been trying to figure out the proper solution but haven't had any success..</p>
  
  <p>I've spent more time then I would like to admit trying to figure out row's and column placement and how you can manipulate elements inside them but I'm having a hard time finishing my layout. I would like to place both my buttons where they are at now but not have them shift downward when the quote box fills up with text.</p>
  
  <p>I know what's happening but I can't figure out how to properly fix it.. I believe the margin of the quote-text is pushing the button row downwards when the text over-flows into the buttons div. How do I make it so that the button div/row ignores any text and remains in place in case there is an exceptionally long quote. I will obviously fix the length of quotes eventually but for now I would like to know how to make my buttons stay in place and how I can properly move them left or right without having to rely on text-"(left/right/center)". There has to be a way to more accurately control the position of elements inside a row isn't there?</p>
  
  <p>This is my codepen and code: <a href="http://codepen.io/countercoded/pen/Mpjdww" rel="nofollow noreferrer">http://codepen.io/countercoded/pen/Mpjdww</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  
    &lt;div class="row justify-content-center"&gt;
      &lt;div class="col-xs-12 text-center" id="title"&gt;&lt;span class="title-text"&gt;Random Quote Machine&lt;/span&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
  
      &lt;div class="col-sm-12 text-center" id="quote-box"&gt;
  
        &lt;div id="new-quote"&gt;Quote goes here.&lt;/div&gt;
  
        &lt;div class="row" id="button-rows"&gt;
          &lt;div class="col-6 text-left"&gt;      
            &lt;i class="fa fa-twitter fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="col-6 text-right"&gt;
            &lt;i class="fa fa-comment fa-3x" aria-hidden="true"&gt;&lt;/i&gt;
          &lt;/div&gt;         
        &lt;/div&gt;
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  
  @import url(https://fonts.googleapis.com/css?family=Raleway:400,500);
  
  body{
    background-color: #9e0e0e;
    font-family: raleway;
    font-weight: 400;
  }
  
  .container{
    width: 600px !important;
    margin-top:200px;
  }
  
  
  
  #title{
  color: #fff;
  
  .title-text{
    font-size: 40px;
    text-align: center;
    }
  }
  
  #quote-box{
    height: 300px;
    background-color: #ffffff;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 3px;
  } 
  #button-rows{
    padding-top:220px;
  
  }
  .fa-comment{
    color: #ba0e0e;
    text-shadow: 2px 2px 1px #ccc;
  }.fa-comment:hover{
    color: #910a0a;
  }   
  
  .fa-twitter{
    color: #ba0e0e;
    text-shadow: 2px 2px 1px #ccc;
  } .fa-twitter:hover{
    color: #910a0a;
  }
  </code></pre>
  
  <p>Thanks for the help!</p>