CSS inline-block images won't align horizontally - image

Question

I've done this a million times but I can't figure out why this won't work now. I'm trying to get 4 images of the same size to sit in a straight line horizontally however they are appearing slightly diagonal from each other.
Here is my html
<div class="homepage_images">
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg" alt="" width="300" height="228" class="alignnone size-full wp-image-182" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-181" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-184" />
<img src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg" alt="ONE 2014 WEBSITE REV2" width="300" height="228" class="alignnone size-full wp-image-183" />
</div>
And my CSS:
.homepage_images {
display:block;
}
.homepage_images img{
display:inline-block;
float:left;
width:240px;
opacity:0.8;
}
And here is a link to the site, the images that are misaligned are near the bottom of the page
http://www.one-event.org.uk

Answer 1

You have a line break between each line. You haven't put it in the code you posted, but in the code from the site,
<div class="homepage_images">
<a href="http://one-event.org.uk/the-event/activities/for-18s-under/">
<img class="alignnone size-full wp-image-182" width="300" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
</a>
<br>
<a href="http://one-event.org.uk/the-event/activities/">
<br>
<a href="http://one-event.org.uk/the-event/streams/">
<br>
<a href="http://one-event.org.uk/the-event/speakers/">
</div>
you have a line break between each div. Removing that fixes the problem.
Basically change it to what you posted;
<div class="homepage_images">
<img width="300" class="alignnone size-full wp-image-182" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/CHILDREN.jpg">
<img width="300" class="alignnone size-full wp-image-181" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/ACTIVITIES-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-184" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/STREAMS-COVER.jpg">
<img width="300" class="alignnone size-full wp-image-183" alt="ONE 2014 WEBSITE REV2" src="http://one-event.org.uk/wp-content/uploads/2013/12/SPEAKERS-COVER.jpg">
</div>

Answer 2

Somehow br tag added after each anchor tag in that div. just check from where that tag is getting added and make necessary changes.