I am trying to create a layout similar to the bottom of Google's homepage using this code. However, no matter what I try, the "lists" are still appearing vertically instead of horizontally. My goal is to have three columns of links positioned side by side on the left and right sides of the screen.
#HTML
<footer>
<div class="footer">
<ul style="width:10%; float:left;list-style-type:none;">
<li>Advertising</li>
<li>Business</li>
<li>About</li>
</ul>
<ul style="width:10%; float:right;list-style-type:none;">
<li>Privacy</li>
<li>Terms</li>
<li>Settings</li>
</ul>
</div>
</footer>
#CSS
.footer li{
display:inline;
}