Inhalt in Footer reagiert nicht auf Boostrap Grid

Question

Ich bin eine Website zum Spaß neu gestalten. Ich habe einen Inhalt in meiner Fußzeile, der in 3 Zeilen mit 3 Spalten unterteilt wurde. Der Inhalt wird jedoch nicht auf dieselbe Zeile gesetzt. Der gesamte Inhalt wird immer weiter gedrückt. Hier

ist die 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> 

Hier ist die CSS ist:

.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; 
} 

Der eigentliche Code auf codepen zu sehen ist: http://codepen.io/sibraza/pen/wWgqBO

Answer 1

der Klassen Name ist falsch Sie verwenden sollten, col-xs-4 statt col-4-xs