Footer div alignment and text issue - html

Question

I'm working on a footer that I'm trying to align items in as shown in the image(actually the logo image and text under it should be a little off the left side not stuck to it).
I'm pretty close but can't get it exactly how I want it. Whenever I try to make the footer smaller as it's a bit too big at the moment stuff leaks out of it. What am I doing wrong?
Also I can't seem to change the text under the footer logo image to be the same as the links. Not sure why that is?
My Fiddle
<div class="row-2">
<div class="logofooter">
<a class="logofooter" href="index.html"> <img src="http://lorempixel.com/output/abstract-q-c-100-100-1.jpg"></a>
<div class="logocopyright">
Copyright info
</div>
</div>
<div class="legal">
<ul class="legal">
<li>Legal Policy</li>
<li>Contact</li>
<li>Privacy</li>
<li>Disclaimer</li>
</ul>
</div>
<div class="social">
<ul class="smm">
<li><a class="facebook" href="https://www.facebook.com"> <img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"></a></li>
<li><a class="twitter" href="https://www.twitter.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
<li><a class="instagram" href="https://www.instagram.com"><img src="http://lorempixel.com/output/abstract-q-c-68-68-5.jpg"> </a></li>
</ul>
</div>
</div>
</footer>
</body>

Answer 1

Does this work better for you?
http://codepen.io/anon/pen/vNXKMa?editors=110
It's using flexbox for the main 3 elements (logo, menu, social menu).
.row-2{
display:flex;
justify-content: space-between;
}
The children elements will be spaced evenly. You can also try space-around.
When you reduce the screen size, things have to stack up at some point.
You could also consider using bootstrap's grid for this kind of layout.

Answer 2

please try This one:
.site-footer, .page-wrap:after {
height: 250px;
}
.site-footer {
background: #919191;
}
.logofooter{
float:left;
padding-top:10px;
}
.logocopyright a {
font-size: 10px;
color: #fff;
text-decoration: none;
text-transform: uppercase;
}
.row-2 ul li a {
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
text-decoration:none;
color:#fff ;
padding: 5px 15px;
font-size: 16px;
}
.row-2 p {
color:#fff;
font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
font-size: 16px;
}
.row-2 a {
font-size: 22px;
}
.row-2{
padding-top: 100px;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.legal{
float:left;
margin-right:auto;
margin-left:-60px;
}
.legal a:hover {
color: #FFF;
-webkit-border-radius: 200px;
-moz-border-radius: 200px;
border-radius: 200px;
background: #1874CD;
}
.legal li {
display:inline-block;
text-align: center;
margin-left:20px;
}
.social{
float:right;
margin-top:-50px;
margin-left:auto;
}
.social li, h3{
font-size:10px;
display:inline-block;
text-align: center;
color:#fff;
}
.smm li{
margin-right:20px;
}
.facebook img
{
width:20px;
height:20px;
border-radius: 50%;
margin-left:90px;
}
.twitter img
{
width:20px;
height:20px;
border-radius: 50%;
margin-left:-30px;
}
.instagram img
{
margin-left:-40px;
width:20px;
height:20px;
border-radius: 50%;
}
See the Demo Page