As a newcomer to HTML, CSS, and Bootstrap, I encountered an issue with overlapping divs when resizing the screen to be smaller. The problem arose when using container-fluid as a section and implementing a customized div for the section header. Despite attempting to modify the display property of my custom div (section header), the issue persisted. I am unsure of the root cause of this problem and would appreciate any suggestions on resolving it. Thank you in advance for your assistance and apologies if the question seems trivial.
Below is the snippet of my HTML:
<div class="home">
<!--this div contains an image on the left and information on the right-->
[HTML content here]
</div>
[More HTML content]
This is the relevant section from my CSS:
.home{
height: 500px;
width: 100%;
}
/* Additional CSS styling */
The issue arises when the containers overlap each other upon resizing the screen. Any insights or advice on how to address this problem would be greatly appreciated. Thank you once again for your support.