Jordan Miguel Jordan Miguel - 25 days ago 5
CSS Question

Images on a page are not aligning

I don't know what I'm doing wrong, but my images aren't being displayed side by side on the screen? I am pretty new to CSS by the way. Ideally, I would like the images to be displayed like so - bensilvertown.com

Thanks in advance!

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<div class="work images">
<div>
<a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/cursor.png" />
<p>This is image 1</p>
</div>
<div>
<a href="http://www.google.com"><img src="/Users/mac/Documents/PICTURES/MIKE\ BRODIE.jpg" />
<p>This is image 2</p>
</div>

</div>

</body>
</html>


CSS:

html{
background-color: #000000
}

html,body{
color: #fff;
font-family:
font-weight:
}

/*align images side by side!*/
div{
float:left;
margin-right:5px;
}

div > img{
height:200px;
width:200px;
}

p{
text-align:center;
}

Answer

Insert display:inline; property inside the div

Obs1: I've changed your images paths to validate better your code.
Obs2: Your forgot to close your before img <a>

https://jsfiddle.net/2ke6huxs/