I can't the col in this footer out - html

Question

This is what I'm trying to do, in between the two pink lines is my max width.
This is what I'm getting:
I'm getting close:
This is my HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
<div class="row">
<div class="col-md-2">
<img src="img/FB_LINK.png" alt="Follow us on Facebook"></div>
<div class="col-md-2">
<img src="img/TWITTER_LINK.png" alt="Follow us on Twitter"></div>
<div class="col-md-2">
<img src="img/LINKEDIN_LINK.png" alt="Link In with Us"></div>
</div>
<div class="row">
<div class="col-sm-6"><h7>© 2016 COPYRIGHT LINE</h7></div>
</div>
</div>
</div>
</footer>
This is my CSS for this section:
footer {
height: 60px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
footer.a{
display:inline-block;
margin:0 auto 0 auto;
}
h7{
color:#FFF;
font-size:24px;
font-family: 'Contrail One', cursive;
text-align:center;
}
I can't seem to figure this out, I've drawn it out on a couple sheets of paper, but I can seem to style like like I'd like. Can anyone point out where I'm going wrong?

Answer 1

After trying your the posted code I found that you are using wrong quote pair.
Also the css you gave isn't designed to achieve the goal.
I made a working fiddle here. Check it out
HTML:
<footer>
<div class="container">
<div class="row">
<div class="col-md-6 parent">
<p>GET SOCIAL WITH US!</p>
<div class="icon">
<img src="https://myapnea.org/assets/myapnea/icons/facebook_icon-7eedcb8837293505e1d3b1494ff19c9c3842340d1dfcd193e098e2b44f34456b.png" alt="Follow us on Facebook">
<img src="http://frcgamesense.com/dnn/portals/0/Home/Twitter_icon.png" alt="Follow us on Twitter">
<img src="https://store-images.s-microsoft.com/image/apps.36749.9007199266245564.6701eae8-16d2-4ba0-bdaa-8d9d9f9a1e70.03e5f6a9-3866-4ad9-9f2b-6b57ff90419e?w=100&h=100&q=60" alt="Link In with Us"></div>
</div>
<div class="col-md-6">
<p class="copyright">© 2016 COPYRIGHT LINE</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
padding: 5px;
height: 100px;
width: 100%;
font-size: 14px;
position: absolute;
background-color: #2A3E47;
font-family: 'Contrail One', cursive;
margin: 0px 10px 0px 10px;
text-align:center;
}
.copyright {
padding-top: 40px;
}
footer p {
color: #fff;
}
footer a img {
display: inline-block;
width:50px;
}
.parent .icon {
margin: auto 7px;
}

Answer 2

It looks like your second col-sm-6 is nested too deep. It should be at the same level of the other one, not within it. Your divs are all sitting on half the grid (6 wide) and then the three social logos are taking half of that, and the copyright bit is taking the other half. You need the col-sm-6 divs to be siblings.
Furthermore, I don't think col-sm-6 looks like it'll work, looking at what you're trying to achieve. You might want to make the first group col-sm-3 or so and add an offset class to the copyright part. :-)

Answer 3

There are at least 3 errors in your HTML markup:
<h7>GET SOCIAL WITH US!</h7>
<div class="container'>
The ending quote should be double ("), not single (')
Since you place it in a column, the class name of this tag should be container-fluid, not container
</div>
<div class="row">
<div class="col-sm-6">
Missing close tag, the div .row is not neccessary.
</div>
</div>
</div>
<div class="col-sm-6">
Please see the fixed code here