I have been exploring CSS and HTML for about a week now, but I am facing a challenge that has me stuck for the past thirty minutes. The issue lies in adapting this code to work smoothly across different browsers. While it aligns images in a row of four perfectly on Chrome with even spacing, it fails to do so on Safari. I have yet to test its compatibility with Firefox. Any guidance on how to make this code adaptable would be greatly appreciated.
#containermain {
display: flex;
justify-content: space-between;
}
#containermain div {
width: 250px;
height: auto;
background: rgb(255, 255, 255, 0);
}
#containermaintext div {
width: 250px;
height: auto;
background: rgb(255, 255, 255, 0);
}
#containermain div:first-child {
border-left: 0;
}
#containermain div:last-child {
border-right: 0;
}<div id="containermain" class="slideExpandUp">
<div>
<a href="physics.html">
<img src="images/atom.png" style="width: 100%;">
</a>
</div>
<div>
<a href="math.html">
<img src="images/mathematics.png" style="width: 100%;">
</a>
</div>
<div>
<a href="humanities.html">
<img src="images/books.png" style="width: 100%;">
</a>
</div>
<div>
<a href="stem.html">
<img src="images/stem.png" style="width: 100%;">
</a>
</div>
</div>