I'm trying to get the background images to display side by side with equal sizes and no spacing between them. The current code achieves this, but the images end up overlapping slightly, not filling 100% of the container.
Despite setting the background-size to 25% 100%, the images still overlap a bit. I need them to be equally sized, appear next to each other without any gaps or overlaps.
.education {
background: linear-gradient(rgba(141, 153, 174, 0.8), rgba(141, 153, 174, 0.5)),
url(https://picsum.photos/200/300?random1) no-repeat fixed, url(https://picsum.photos/200/300?random2) no-repeat fixed, url(https://picsum.photos/200/300?random3) no-repeat fixed, url(https://picsum.photos/200/300?random4) no-repeat fixed;
background-size: 25% 100%;
background-position: 0% 0%, 25% 0%, 50% 0%, 75% 0%;
}<section id="education" class="education">
<div class="content-wrap">
<h2>Education</h2>https://jsfiddle.net/Temitope/61pz03hy/5/#run
<!-- School details: copy this whole block to add more schools. -->
<h3>Andela - Lagos, Nigeria</h3>
<p>Mobile Web Specialist Certificate, 2019</p>
<p>Five Months Learning Program.</p>
<h3>University Of Lagos - Akoka, Lagos</h3>
<p>Bachelor of Science, 2013-2017</p>
<p>Major in Economics and International Trade.</p>
<h3>Kith and Kin International College - Ikorodu, Lagos</h3>
<p>West African Exam Council Certificate, 2009-2013</p>
<p> Major in Commerce.</p>
</div>
</section>I want the background images to appear side by side with equal sizing and responsive design for different device widths.