I am in the process of creating a footer with three components: a logo aligned to the left, a centered navigation menu, and a set of social icons on the right. I have encountered an issue where when I float the logo to the left, the list items within my navigation menu are unexpectedly pushed to the right. Despite centering the unordered list on the page and ensuring there is no padding or margin on the list items, they continue to shift. Below is the code snippet along with screenshots for reference.
HTML
<p class="copyright footerLogo">
OUR COMPANY LOGO</p>
<div class="footerNavbar">
<ul>
<li><a href="default.asp">Services</a></li>
<li><a href="news.asp">Client Work</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">Hire Us</a></li>
</ul>
</div>
<div class="socialIcons">
<ul>
<li>
<a href="http://facebook.com">
<i class="fa fa-facebook-official fa-2x"></i>
</a>
</li>
<li>
<a href="http://twitter.com">
<i class="fa fa-twitter-square fa-2x"></i>
</a>
</li>
<li>
<a href="http://linkedin.com">
<i class="fa fa-linkedin-square fa-2x"></i>
</a>
</li>
</ul>
</div>
</footer>
CSS
footer {
text-align: center;
height: 5em;
background: transparent; }
footer .footerLogo {
float: left;
padding-left: 2em;
padding-top: 1em; }
footer .footerNavbar {
width: 60%;
margin: 0 auto; }
footer .footerNavbar ul {
padding: 0; }
footer .footerNavbar ul li {
text-align: center;
display: inline-block; }
footer .socialIcons {
float: right;
padding-right: 2em; }
footer .socialIcons ul li {
display: inline-block; }
The unordered list is centered:
Without float left property, list items are properly centered: