Why the divs are overlapping in Bootstrap?

Question

I'm having a problem with my divs overlapping. When the window is resized, the block "bg2" overlaps the columns into "bg3". Can't seem to figure out why. I've tried putting clear: both; between the divs, it didn't help.

Here is my code.

<?php include('header.php'); ?>

<div class="bg1">
    <div class="content-container">
        <div class="bg1-text1">
            A Minecraft server ran by IT professionals
        </div>
        <div class="bg1-text2">
            <li>Stable optimized Spigot server</li>
            <li>Highly effective DDoS solution</li>
            <li>Strong anti-cheat solution</li>
            <li>Non-abusive admin staff</li>
            <li>NOT <span style="text-decoration: line-through;">pay to win</span></li>
        </div>
    </div>
</div>

<div class="bg2">
    <div class="row">
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
        <div class="col-md-4">
            <h2>Example body text</h2>
            <p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
            <p><small>This line of text is meant to be treated as fine print.</small></p>
            <p>The following snippet of text is <strong>rendered as bold text</strong>.</p>
            <p>The following snippet of text is <em>rendered as italicized text</em>.</p>
            <p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
        </div>
    </div>
</div>

<div class="bg3">
    <div class="row">
    </div>
</div>

<div class="bg4">
    <div class="row">
    </div>
</div>

Here is my custom css (not bootstrap)

.bg1 {
background-image: url(../images/bg1.jpg);
clear: both;
width: 100%;
height: 400px;
margin: 0 auto;
padding: 0px;
-webkit-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
}
.bg2 {
background-color: #fffeee;
clear: both;
width: 100%;
height: 300px;
margin: 0 auto; 
padding: 0px;
}
.bg3 {
background-image: url(../images/bg3.jpg);
clear: both;
width: 100%;
height: 300px;
margin: 0 auto;
padding: 0px;
-webkit-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
box-shadow: inset 0px -5px 15px 0px rgba(0,0,0,0.75);
}
.bg4 {
background-color: #fffeee;
width: 100%;
height: 300px;
margin: 0 auto; 
padding: 0px;
}
.content-container {
margin-right: auto;
margin-left: auto;
padding: 45px;
}
@media (min-width: 768px) {
.content-container {
width: 750px;
}
}
@media (min-width: 992px) {
.content-container {
width: 970px;
}
}
@media (min-width: 1200px) {
.content-container {
width: 1170px;
}
}
.bg1-text1 {
font-size: 30px;
color: #FFF;
}
.bg1-text2 {
font-size: 20px;
color: #FFF;
padding-top: 15px;
padding-left: 40px;
list-style: none;
}

Any help appreciated. Thank you!

Answer 1

You could remove the fixed value height:300px; on .bg1 .bg2 .bg3 .bg4.

Or, add either overflow:auto; or overflow:hidden; if you do need the fixed value.