How to place images next to each other - html

Question

Not sure what's wrong with this because currently it's not responding to the CSS. It just overlaps all the images and text on top of each other and the images are original size rather than the 50px by 50px as indicated in the CSS.
HTML:
<p> Connect with Steven on </p>
<div class=socialmedialinks>
<a href="https://www.facebook.com/Established.in.1995" class=links> <img src="FBProfilePic.jpg" alt="Facebook">
</a> Facebook
<a href="http://twitter.com/stevenperkinsii" class=links> <img src="TwitterProfilePic.jpg" alt="Twitter">
</a> Twitter
<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=links> <img src="LinkedInProfilePic.jpg" alt="LinkedIn">
</a> LinkedIn
<a href="http://www.stevensperkins.wordpress.com/" class=links> <img src="WordPressProfilePic.jpg" alt="WordPress">
</a> WordPress
</div>
CSS:
.socialmedialinks {text-align:justify; width:50px}
.links{
display: inline-block; width:50px; height:50px;
}

Answer 1

Steven do you have an example of the output you're looking for? You've got a wide variety of issues going on here that are creating issues with your output if I understand correctly what you're trying to do.
First and foremost, you don't have any styles constraining the size of the images, you need the following style definition:
.links img {
max-width:50px;
max-height:50px;
}
Regarding positioning of the text relative to the images, you've got structural issues preventing things from displaying the way you want them to. You also need to surround your class names with quotes really, though that's not a factor here. I've reworked your code slightly to make what I think you want, if there are specifics to what I've done that aren't what you're looking for let me know and I'll help you get where you want to be: https://jsfiddle.net/7k5nn1n7/

Answer 2

Is this what you are trying:
<p> Connect with Steven on </p>
<div class="socialmedialinks">
<div class="links"><img alt="Facebooki" src="FBProfilePic.jpg">Facebook</div>
<div class="links"><img alt="Twitter" src="TwitterProfilePic.jpg">Twitter</div>
<div class="links"><img alt="LinkedIn" src="LinkedInProfilePic.jpg">LinkedIn</div>
<div class="links"><img alt="WordPress" src="WordPressProfilePic.jpg">WordPress</div>
</div>
CSS:
.socialmedialinks {
width:100%;
}
.links{
float:left;
padding-left:2%;
}
.links img {
width:50px;
height:50px;
}

Answer 3

You can give each link a class name.
add title="" for the link instead of alt="".
remove the image tags.
you can use the CSS to add the image to the link.
here is the code for html:
here is the CSS:
.socialmedialinks a:link,
.socialmedialinks a:active
.socialmedialinks a:visited{
text-indent: -9999em;
width:50px;
height:50px;
margin-right: 3px;
float: left;
padding:0;
}
.facebook {background: url('FBProfilePic.jpg') no-repeat;}
.twitter{background: url('TwitterProfilePic.jpg') no-repeat;}
.linkedin{background: url('LinkedInProfilePic.jpg') no-repeat;}
.wordpress{background: url('WordPressProfilePic.jpg') no-repeat;}
Please if you have any question let me know. thanks

Answer 4

Try The Following code:
HTML
<p>Connect With Steven on </p>
<h4 class="social">
<img src="facebook.jpg" alt="Facebook">Facebook</h4>
<h4 class="social">
<img src="twitter.png" alt="Twitter">Twitter</h4>
<h4 class="social">
<img src="youtube.png" alt="Youtube">Youtube</h4>
<h4 class="social">
<img src="instagram.jpg" alt="Instagram">Instagram</h4>
CSS
img{
height: 50px;
width: 50px;
margin-right: 4px;
}
h4{
width: 150px;
float:left;
}
Here is the sample Fiddle: Fiddle