I am a beginner in html/css and I am trying to learn it by implementing it in different ways. I have a page containing some divs
.header-section {
height: 400px;
padding-top: 10px;
padding-bottom: 10px;
background-color: red;
background-clip: content-box;
}
.description-section {
min-height: 500px;
border: 2px solid black;
background-color: lightpink;
padding-top: 10px;
padding-bottom: 10px;
overflow: auto;
}
.another-description-section {
min-height: 500px;
border: 2px solid black;
background-color: blueviolet;
padding-top: 10px;
padding-bottom: 10px;
}
.column1 {
height: 90px;
background-color: blue;
}
.column2 {
height: 90px;
background-color: mediumvioletred;
}
.inner-content1 {
height: 60px;
background-color: yellow;
}
.inner-content2 {
height: 60px;
background-color: chocolate;
}
.logo-style {
height: 30px;
background-color: magenta;
}
.logo-description {
height: 20px;
background-color: saddlebrown;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<div class="header-section div1 col-lg-12">
<div class="column1 div3 col-lg-6">
<div class="inner-content1">
<div class="logo-style"></div>
<div class="logo-description"></div>
</div>
</div>
<div class="column2 col-lg-6">
<div class="inner-content2" style="background-color:antiquewhite;">
<div class="contact-or-whatever-info" style="background-color:brown;">
</div>
</div>
</div>
</div>
<div class="description-section">
<div class="inner-description">
second div
</div>
</div>
<div class="another-description-section">
<div class="inner-description">
third div
</div>
</div>The problem I faced was my second div div was overlapping with the first one(although third div wasn't overlapping at all and also when I create another simple div with some text only between second and first div. then my second div does not overlap at all) so I used some solutions like clear:both; or overflow:hidden/auto; from here and it worked as expected but I didn't get it, like why its happening like this? or whats causing main problem? because in other pages with almost same codes it works perfectly(doesn't overlap).
can anyone help me understanding this or what I might have missed. I also have used bootstrap for my navbar which is fixed at top with links at both right and left side but as I mentioned above the other pages with divs are working fine.