フッター内の同じ行にdivsを取得できません

Question

私はサイト用のフッターを作成していますので、複数のセクションがあり、各セクションにdivが必要です。これまでのところ私はあまりにも持っているが、ここで示したように、彼らは、互いに整列していない：

Answer 1

footer { 
 
    \t height: 300px; 
 
    \t background-color: #EBEBEB; 
 
    \t width: 100%; 
 
} 
 
div#footer-wrapper div{ /* add this section of code */ 
 
    vertical-align : top; /* vertical alignment */ 
 
} 
 
footer ul li { 
 
    \t font-family: 'Arsenal', sans-serif; 
 
    \t font-weight: 600; 
 
    \t font-size: 14px; 
 
    \t list-style-type: none; 
 
} 
 
footer h1 { 
 
    \t font-family: 'Arsenal', sans-serif; 
 
    \t font-weight: 600; 
 
    \t margin-bottom: 0px; 
 
} 
 
footer .footer-h1-wrapper { 
 
    \t width: 220px; 
 
    \t border-bottom: 4px solid #333; 
 
} 
 
footer #footer-wrapper { 
 
    \t margin-left: 150px; 
 
    \t height: 290px; 
 
} 
 
.footer-div { 
 
    \t display: inline-block; 
 
    \t margin-top: 50px; 
 
}

<footer> 
 
     <div id="footer-wrapper"> 
 
     <div id="footer-about" class="footer-div"> 
 
      <div class="footer-h1-wrapper"><h1>ABOUT US</h1></div> 
 
      <ul> 
 
      <li><a href="#/">FAQ</a></li> 
 
      <li><a href="#/">Who We Are</a></li> 
 
      <li><a href="#/">Terms of Service</a></li> 
 
      <li><a href="#/">Shipping Policy</a></li> 
 
      </ul> 
 
     </div> 
 
     <div id="footer-social" class="footer-div"> 
 
      <div class="footer-h1-wrapper"><h1>GET IN TOUCH</h1></div> 
 
      <ul> 
 
      <li><a href="#"><i class="fa fa-facebook-square fa-lg" aria-hidden="true"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-instagram fa-lg" aria-hidden="true"></i></a></li> 
 
      <li><a href="#"><i class="fa fa-twitter-square fa-lg" aria-hidden="true"></i></a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </footer>