Footer content not floating to right - html

Question

I have a footer with content in it. Problem I'm having is the content is displaying vertically instead of horizontally.
I've tried using float:right; that hasn't changed anything. Would really appreciate some help.
Also two of the three social icons aren't showing up. That might be because of the float issue though...
Here's my code
<div class="footer-grid">
<h3>More</h3>
<ul>
<li>FAQ</li>
<li>Privacy Policy</li>
<li>Terms and Conditions</li>
</ul>
</div>
<div class="footer-grid">
<h3>Connect With Us</h3>
<ul class="social-icons">
<li>
<a class="facebook" href="#"> </a>
</li>
<li>
<a class="pinterest" href="#"> </a>
</li>
<li>
<a class="twitter" href="#"> </a>
</li>
</ul>
<p class="copy-right">Website by Elevate design</p>
</div>
Css:
.footer-grid {
min-width: 100%;
float: left;
background-color: #414141;
}
.footer-grid:nth-child(3n+1) {
margin-right: 0;
}
.footer-grid h3 {
color: #3D3D3D;
float: right;
font-size: 14px;
font-family: 'arial';
margin-bottom: 0.8em;
}
.footer-grid ul li {}
.footer-grid ul li a {
color: #8C8C8C;
font-size: 14px;
transition: 0.5s all;
margin-right: 10px;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid ul li a:hover {
zoom: 1;
filter: alpha(opacity=75);
opacity: 0.7;
-webkit-transition: opacity .15s ease-in-out;
-moz-transition: opacity .15s ease-in-out;
-ms-transition: opacity .15s ease-in-out;
-o-transition: opacity .15s ease-in-out;
transition: opacity .15s ease-in-out;
}
.social-icons li {
display: inline-block;
}
.social-icons li a {
width: 72px;
height: 72px;
display: block;
}
.social-icons li a.facebook {
background: url(../images/facebook_icon.png) no-repeat 0px 0px;
}
.social-icons li a.twitter {
background: url(../images/twitter_.png) no-repeat -56px 0px;
}
.social-icons li a.pinterest {
background: url(../images/pinterest.png) no-repeat -112px 0px;
}
.footer-grid p {
color: #A2A2A2;
font-size: 14px;
line-height: 1.5em;
padding: 0 0 0.4em 0;
}
.footer-grid input[type="text"] {
width: 84%;
margin: 0.4em 0 1em;
padding: 0.8em;
border: 1px solid #C3C3C3;
transition: border-color 0.5s all;
-webkit-transition: border-color 0.5s all;
-moz-transition: border-color 0.5s all;
-o-transition: border-color 0.5s all;
font-family: 'open_sanssemibold';
color: #3D3D3D;
outline: none;
border-radius: 0.5em;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-o-border-radius: 0.5em;
}
.footer-grid input[type="text"]:hover {
border: 1px solid #999;
}
.footer-grid input[type="submit"] {
background: #F36EA7;
padding: 0.8em;
display: block;
width: 100%;
font-family: 'arial';
color: #FFF;
border: none;
font-size: 14px;
border-radius: 0.3em;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
-o-border-radius: 0.3em;
outline: none;
cursor: pointer;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.footer-grid input[type="submit"]:hover {
background: #EE639F;
}
.footer-grids {
padding: 3em 0 5em;
}
.copy-right {
margin-top: 1em;
}
.copy-right a {
color: #A2A2A2;
transition: 0.5s all;
-webkit-transition: 0.5s all;
-moz-transition: 0.5s all;
-o-transition: 0.5s all;
}
.copy-right a:hover {
color: #F36EA7;
}

Answer 1

you forgot to put display:inline-block in .footer-grid ul li
.footer-grid ul li{
display:inline-block;
}