Q:

Can't move two images in a div without moving both of them or something else, how do I just move one?

Here's my HTML:
<footer>

        <div class="container clearfix">

            <div id="footer-content">

                <p id="copyright">Copyright &copy; 2014</p>

                <div class="social">

                    <a href="http://www.facebook.com" target="_blank"><img src="images/facebook_icon.gif" alt="Follow us on Facebook"></a>
                    <a href="http://www.twitter.com" target="_blank"><img src="images/twitter_icon.gif" alt="Follow us on Twitter"></a>

                </div><!--end of social-->

            </div><!--end of footer-content-->

        </div><!--end of container & cleafix-->

    </footer>

Here's my CSS:
footer {
background: #d37a7a;
color: #fff;
margin-top: 95px;
height: 98px;
overflow: hidden;
}
#copyright {
float: left;
font-size: 19px;
padding: 20px 0;
}

.social {
float: right;
padding: 20px 0;
}

I can't seem to move the facebook icon just a little bit to the left. I've tried using margin and padding to push it to the left but it either moves both the twitter and facebook icons, doesn't do anything or pushes the twitter icon underneath the facebook icon.
I've also tried putting it in its own div and then doing position: relative and then moving it but it'll push the twitter icon underneath it again.
Any suggestions on what I should do? Thanks

A:

You should add classes to each of your social media anchors:
<a class="facebook" href="http://www.facebook.com" target="_blank"><img src="images/facebook_icon.gif" alt="Follow us on Facebook" /></a>
<a class="twitter" href="http://www.twitter.com" target="_blank"><img src="images/twitter_icon.gif" alt="Follow us on Twitter" /></a>

then you can apply the styles to just the one element:
.facebook {
    margin-right: 10px;
}

