Footer div alignment and text issue

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">
                       <a href="index.html"> Copyright info</a>
                   </div>
          </div>
       <div class="legal">
                 <ul class="legal">
                     <li><a href="legal.html">Legal Policy</a></li>
                     <li><a href="contact.html">Contact</a></li>
                     <li><a href="privacy.html">Privacy</a></li>
                    <li><a href="disclaimer.html">Disclaimer</a></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