CSS | Footer Kısmı Yatay Olması Gerekirken Dikey Oluyor

[CODE lang="html" title="HTML"]<footer class="footer">
<link rel="stylesheet" type="text/css" href="css/footer style.css">
<div class="footer-left col-md-4 col-sm-6">
<p class="about">
<span> About the company</span> Ut congue augue non tellus bibendum, in varius tellus condimentum. In scelerisque nibh tortor, sed rhoncus odio condimentum in. Sed sed est ut sapien ultrices eleifend. Integer tellus est, vehicula eu lectus tincidunt,
ultricies feugiat leo. Suspendisse tellus elit, pharetra in hendrerit ut, aliquam quis augue. Nam ut nibh mollis, tristique ante sed, viverra massa.
</p>
<div class="icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</div>
</div>
<div class="footer-center col-md-4 col-sm-6">
<div>
<i class="fa fa-map-marker"></i>
<p><span> Street name and number</span> City, Country</p>
</div>
<div>
<i class="fa fa-phone"></i>
<p> (+00) 0000 000 000</p>
</div>
<div>
<i class="fa fa-envelope"></i>
<p><a href="#"> office@company.com</a></p>
</div>
</div>
<div class="footer-right col-md-4 col-sm-6">
<h2> Company<span> logo</span></h2>
<p class="menu">
<a href="#"> Home</a> |
<a href="#"> About</a> |
<a href="#"> Services</a> |
<a href="#"> Portfolio</a> |
<a href="#"> News</a> |
<a href="#"> Contact</a>
</p>
<p class="name"> Company Name &copy; 2016</p>
</div>
</footer>[/CODE]

[CODE lang="css" title="CSS"].footer {
background-color: #414141;
width: 100%;
text-align: left;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
padding: 50px;
margin-top: 50px;
}

.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
display: inline-block;
vertical-align: top;
}


/* footer left*/

.footer .footer-left {
width: 33%;
padding-right: 15px;
}

.footer .about {
line-height: 20px;
color: #ffffff;
font-size: 13px;
font-weight: normal;
margin: 0;
}

.footer .about span {
display: block;
color: #ffffff;
font-size: 14px;
font-weight: bold;
margin-bottom: 20px;
}

.footer .icons {
margin-top: 25px;
}

.footer .icons a {
display: inline-block;
width: 35px;
height: 35px;
cursor: pointer;
background-color: #33383b;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
text-align: center;
line-height: 35px;
margin-right: 3px;
margin-bottom: 5px;
}


/* footer center*/

.footer .footer-center {
width: 30%;
}

.footer .footer-center i {
background-color: #33383b;
color: #ffffff;
font-size: 25px;
width: 38px;
height: 38px;
border-radius: 50%;
text-align: center;
line-height: 42px;
margin: 10px 15px;
vertical-align: middle;
}

.footer .footer-center i.fa-envelope {
font-size: 17px;
line-height: 38px;
}

.footer .footer-center p {
display: inline-block;
color: #ffffff;
vertical-align: middle;
margin: 0;
}

.footer .footer-center p span {
display: block;
font-weight: normal;
font-size: 14px;
line-height: 2;
}

.footer .footer-center p a {
color: #0099ff;
text-decoration: none;
}


/* footer right*/

.footer .footer-right {
width: 35%;
}

.footer h2 {
color: #ffffff;
font-size: 36px;
font-weight: normal;
margin: 0;
}

.footer h2 span {
color: #0099ff;
}

.footer .menu {
color: #ffffff;
margin: 20px 0 12px;
padding: 0;
}

.footer .menu a {
display: inline-block;
line-height: 1.8;
text-decoration: none;
color: inherit;
}

.footer .menu a:hover {
color: #0099ff;
}

.footer .name {
color: #0099ff;
font-size: 14px;
font-weight: normal;
margin: 0;
}

@media (max-width: 767px) {
.footer {
font-size: 14px;
}
.footer .footer-left,
.footer .footer-center,
.footer .footer-right {
display: block;
width: 100%;
margin-bottom: 40px;
text-align: center;
}
.footer .footer-center i {
margin-left: 0;
}
}[/CODE]



Bu footerı biryerden kopyaladım ve biraz düzenleme yapacaktım ancak dikey oldu. Bunu nasıl düzeltebilirim?