There is a strange issue I'm facing where some borders on identical divs are not showing up. I have spent hours trying to troubleshoot this problem, and it seems like zooming in or out sometimes makes the border appear or disappear. My hunch is that it might be related to flexboxes. In the example provided, you can see that the first div has a top border, but the second one does not, even though they are exactly the same. I am puzzled by this inconsistency and would appreciate a fresh perspective on this. Thank you.
https://jsfiddle.net/kcaej1nz/
<div class="CONTAINER">
<div class="child_4a">
<div class="homecontent-mid">
<div class="sliderdiv"><img src="images/black.png" alt="test1"></div>
<div class="main-search">
<div class="new-title"><a href="">Title 2</a><br><span class="contact-article">7/17/2019 by: <a href="contact">Ian</a></span><br>
<p class="pale-goddess">Short sentence 2.</p>
</div>
</div>
</div>
</div>
<div class="child_4a">
<div class="homecontent-mid">
<div class="sliderdiv"><img src="images/black.png" alt="test1"></div>
<div class="main-search">
<div class="new-title"><a href="">Title 3</a><br><span class="contact-article">7/17/2019 by: <a href="contact">Ian</a></span><br>
<p class="pale-goddess">Short sentence 3.</p>
</div>
</div>
</div>
</div>
</div>