Why is HTML header selecting all the divs before him? - html

Question

I have two titles of some articles. It goes Camping tips, then its content and then the title of the next article. But somehow Mountaineering keeps selecting all the divs from Camping tips. I want to change only the background color of the h2 and it keeps changing it to all the divs inside Camping tips. How do I resolve this issue? PICTURES of how it looks like, only headings should be red, not the content:(https://snag.gy/rvJAh2.jpg) and (https://snag.gy/s8ouEA.jpg)
**Here is the code:
<h2 id="camptips" style="font-family:'courier'; background-color:#800000; text-align:center;font-size:30px">Camping tips</h2>
<div class="imgContainer">
<h3 class="head3"> 1.Create a makeshift lantern.</h3>
<img src="stylesheets/images/tip1.jpg" alt="TIP1" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 2.Sage - a natural bug repellent.</h3>
<img src="stylesheets/images/tip2.jpg" alt="TIP2" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 3.Spice that shit up.</h3>
<img src="stylesheets/images/tip3.jpg" alt="TIP3" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 4.Pack a cooler like a boss.</h3>
<img src="stylesheets/images/tip4.jpg" alt="TIP4" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 5.Hide your valuables in soap.</h3>
<img src="stylesheets/images/tip5.jpg" alt="TIP5" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 6.Make calzones. And cook over fire.</h3>
<img src="stylesheets/images/tip6.jpg" alt="TIP6" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 7.You can cook anything in foil.</h3>
<img src="stylesheets/images/tip7.jpg" alt="TIP7" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 8.Pre-make your pancakes.</h3>
<img src="stylesheets/images/tip8.jpg" alt="TIP8" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 9.Cook all your hot dogs at once.</h3>
<img src="stylesheets/images/tip9.jpg" alt="TIP9" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 10.Never lose keys in the water.</h3>
<img src="stylesheets/images/tip10.jpg" alt="TIP10" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 11.Get comfy with padding.</h3>
<img src="stylesheets/images/tip11.jpg" alt="TIP11" width="350" height="300">
</div>
<div class="imgContainer">
<h3 class="head3"> 12.Know your knots!</h3>
<img src="stylesheets/images/tip12.jpg" alt="TIP12" width="350" height="300">
</div>
<h2 style="font-family:'courier'; background-color:#880000; text-align:center; border: 5px solid black;font-size:30px">Mountaineering</h2>

Answer 1

I changed the
.imgContainer {
float: left;
margin: auto;
padding: 25px;
}
to
.imgContainer {
display: inline-block; /* <-- changed this */
margin: auto;
padding: 25px;
}
and now it works perfectly.