html - 为什么HTML header 会选择前面的所有div？

我有一些文章的两个标题。它有Camping技巧，然后是内容，然后是下一篇文章的标题。但是，Mountaineering不停地从Camping技巧中选择所有div。我只想更改h2的背景颜色，并将其不断更改为Camping提示中的所有div。我该如何解决这个问题？有关其外观的图片，仅标题应为红色，而非内容：（https://snag.gy/rvJAh2.jpg）和（https://snag.gy/s8ouEA.jpg）

**这里是代码：

<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>

最佳答案

我改变了

.imgContainer {
    float: left;
    margin: auto;
    padding: 25px;
}

至

.imgContainer {
    display: inline-block; /* <-- changed this */
    margin: auto;
    padding: 25px;
}

现在它可以完美运行了。