As a beginner in using Bootstrap 4, I am working on creating a practice website. While designing the layout, I encountered an issue that seems simple but I can't seem to figure it out.
<div id="box-container" class="container-fluid">
<div id="box-row" class="row">
<div id="header-box1" class="col-lg-6 header-box">
</div>
<div id="header-box2" class="col-lg-6 header-box">
</div>
</div>
</div>
Check out the full demo here | Find the full code here (disregard the placeholder images).
In the demo, you'll see two boxes with a zoom hover effect applied. The left box works correctly, but the right one overlaps the left one. It's probably a simple fix, but I'm struggling to understand it.
Any suggestions or advice would be appreciated. Thanks!