JSFiddle - React, Tailwind, and code Playground

HTML

<div id="footer_menu">
    <ul>
                
<li><a href="/search">Search</a></li>
<li><a href="/pages/about-us">About Us</a></li>
<li><a href="/pages/faq">FAQ</a></li>
<li><a href="/pages/terms">Terms</a></li>
<li><a href="/pages/contact-us">Contact</a></li>
     </ul>
</div>

CSS

#footer_menu {
    text-align: left;
    border: 2px solid black;
    background-color:red;
}

#footer_menu ul{
    width:100%;
    overflow:hidden;    
    display: inline-block;
}
#footer_menu ul li{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    text-align:center;
    float:left;
}
#footer_menu ul li a{
    color:#000;
    font-weight:bold;
    display:block;
    text-decoration:none;
    line-height:38px;
    padding:0px 25px;
}


ul.center {
    text-align: center;
}