Content in Footer Not Responding to Boostrap Grid

I'm redesigning a website for fun. I have some content in my footer that were divided into 3 rows with 3 columns. However, the content is not being put on the same line. All the content keeps getting pushed down.

Here is the HTML:

<footer class="footy">
  <div class="container-fluid">
  <div class="row">
    <div class="col-4-xs">
  <h4 class="about_us"> About Us </h4>
      </div>
        <div class="col-4-xs">
  <h4 class="account text-center"> My Account </h4>
      </div>
        <div class="col-4-xs">
  <h4 class="follow"> Follow US </h4>
      </div>
  </div>
  <hr>
  <div class="row">
  <p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.<a href="https://www.dynamikmuscle.com/#">click to read more</a></p>
    </div>
  <div class="row">
    <div class="col-4-xs">
 <ul class="reach_out">
  <li> Content </li>
<li> Content </li>
<li> Content </li>
  </ul> 
    </div>
    <div class="col-4-xs">
      <ul class="links text-center">
  <li> Content </li>
<li> Content </li>
<li>Content </li>
  </ul> 
    </div>
    <div class="col-4-xs">
      <ul class="social">
  <li> Content </li>
<li> Content </li>
<li>Content </li>
  </ul> 
    </div>
  </div>
  </div>
</footer>

Here is the CSS:

.footy{
  color: white; 
  background: black; 
  height:140px; 
  width: 100%; 
}
.about_info{
  width: 30%; 
  float: left; 
  font-size: 14px; 
  margin-left: 30px; 
}
.about_us{
  margin-left: 30px; 
  margin-top: 30px; 
}
.reach_out{
 margin-left: 30px; 
}
.account{
  margin-left: 
}
.follow{
  float: right; 
  margin-right: 30px; 
  display: inline-block; 
}
.social{
  float: right; 
}

The actual code can be seen on codepen: http://codepen.io/sibraza/pen/wWgqBO