<h3>Made for <a href="https://stackoverflow.com/questions/57262393/how-to-add-side-by-side-image-with-a-gap-between-them">this</a> StackOverflow post</h3>
<center>
	<ul class="homepageGuide column">
		<a href="/blog/"><img class="img-responsive" data-original="/uploads/button-1.png" />
			<p>
				<img src="https://cdn.theatlantic.com/assets/media/img/mt/2019/07/GettyImages_138965532/lead_720_405.jpg?mod=1563813032" width="100%" alt="example one">
			</p>
			<span class="color-overlay"></span>
        </a>
	</ul>
    <ul class="homepageGuide column">
		<a href="/testimonials.php">
        	<img class="img-responsive" data-original="/uploads/button-2.png" />
			<p>
				<img src="https://cdn.theatlantic.com/assets/media/img/mt/2018/11/shutterstock_552503470/lead_720_405.jpg?mod=1541605820" width="100%" alt="example two">
			</p>
			<span class="color-overlay"></span>
        </a>
	</ul>
</center>
.column {
  box-sizing: border-box;
  float: left;
  width: 50%;
  display: inline-block;
}

ul{

padding-left: 2.5%;
padding-right: 2.5%;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.