css - How do I keep nested children (li) inline for my footer navigation? -

i have simple question. i'm trying display

elements "about" "general" , "social-buttons" classes within nested unordered list. want these appear horizontal , inline each other. want them side side basically, not vertical. if can me figure out selector need add 'display:inline' block, useful.

<div class="footer-container"> <div id="footer_menu"> <div id="footer-copy">     <li class="about-blurb">         <h3>viral dna</h3>         <ul>             <li>             <p>virael marketing leading digital marketing blog social web. one-stop hub learn viral marketing campaigns, offer tips & tricks, , build best digital marketing teams.</p>             </li>         </ul>           <li class="general">     <h3>general</h3>          <ul>         <li><a class="button" href="#">media</a></li>                 <li><a class="button" href="#">resources</a></li>                 <li><a class="button" href="#">blog</a></li>             <li><a class="button" href="#">store</a></li>             <li><a class="button" href="#">contact</a></li>              </ul>     <li class="social-icons">     <h3>follow virael</h3>         <ul>             <li>             <!--social media buttons go here-->          </li>     </ul> </ul> </div> </div>   

the css:

.footer-container { font-family: myriadpro-regular, 'myriad pro regular', myriadpro,'myriadpro', arial,  sans-serif; float: left; text-align: left; width: 828px;    text-transform: capitalize; background-color: #4169e1; color: #fff; position: relative; bottom: 0; left: 269px; border-top: 10px solid #b0c4de;  overflow: hidden; z-index=-1000; 

}

.footer-container h3 { text-align:justify; 

}

#footer_menu { font-family: myriadpro-regular, 'myriad pro regular', myriadpro,'myriadpro', arial, sans-serif; list-style-type:none; z-index=-1000; 

}

#footer_menu ul { margin: 0px 30px; padding: 10px 30px; list-style-type:none; text-decoration:none; display:inline;  z-index=-1000; 

}

#footer_menu ul li { margin: 0 0; padding: 5px 0; z-index=-100; display:block; color: white; clear:both;  

}

#footer_menu .about-blurb ul li { width: 200px; height: auto; text-align:justify; 

}

replace css mine. live example here

#footer_menu ul { /* margin: 0px 30px; */ padding: 10px 30px; list-style-type: none; text-decoration: none; display: inline; }  #footer_menu ul li { margin: 0 0; padding: 5px 0; display: inline-block; color: white; clear: both; } 

remove margins ul , add inline-block li