标题标记背景颜色延伸到iPad上的列

Question

我正在网站上工作，并且在IPAD（可能还有iPhone）上遇到问题。

基本上在赞助商页面上：http://www.tcsdesignreno.com/fsw/?page_id=1149。我在不同的部分背后有一个红色背景。我认为它与具有红色背景的H3标签有关。

同样的事情发生在这里：http://www.tcsdesignreno.com/fsw/?page_id=1165。他们都使用Wordpress中的Easy Columns插件。

以下是一些示例HTML

<h3 class="sponsor-hdr" style="text-align: center;">Advertising and Media Partners</h3>
<div class="ezcol ezcol-one-third">
<p><a title="Fire Rescue 1" href="http://www.firerescue1.com/" target="_blank"><img class=" size-full wp-image-1238 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/161_FR1_FC_Logo_Stacked.jpg" alt="FireRescue1.com, Fire Chief" width="161" height="93" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>FireRescue1 / Fire Chief</strong><br />
200 Green St.<br />
2nd Floor<br />
San Francisco, CA 94111<br />
Phone: 415-962-5912</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third">
<p><a title="CSFA" href="http://www.csfa.net/" target="_blank"><img class=" size-full wp-image-1233 aligncenter" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_LatestCSFA-3_5_x_2_75_Logo.jpg" alt="California State Firefighters' Assn " width="116" height="91" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>California State Firefighters&#8217; Assn </strong><br />
2701 K Street, Suite 201<br />
Sacramento, CA  95816<br />
Phone: 800-451-2732<br />
Fax:     916-446-9889</p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Program Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="FPAN" href="http://www.fpanevada.org/" target="_blank"><img class="aligncenter size-full wp-image-1232" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/116_FPAN_Logo_Color.jpg" alt="FPAN" width="116" height="116" /></a></div>
<div class="ezcol ezcol-two-third ezcol-last">
<p>In appreciation to:<br />
<strong>Fire Prevention Association of Nevada</strong><br />
<strong>National Code Services Association</strong></p>
</div><div class="ezcol-divider"></div>
<h3 class="sponsor-hdr" style="text-align: center;">Tote Bag Sponsors</h3>
<div class="ezcol ezcol-one-third"><a title="Burton's Fire" href="http://www.burtonsfire.com/" target="_blank"><img class="aligncenter size-full wp-image-1236" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_BURTONS_FIRE_INC_LOGO.jpg" alt="BURTONS FIRE" width="158" height="54" /></a></p>
</div>
<div class="ezcol ezcol-two-third ezcol-last">
<p><strong>Burton&#8217;s Fire</strong><br />
1301 Doker Avenue<br />
Modesto, CA  95351<br />
209-544-3161</p>
</div><div class="ezcol-divider"></div>
<div class="ezcol ezcol-one-third"><a title="Waterous" href="http://www.waterousco.com/" target="_blank"><img class="aligncenter size-full wp-image-1237" src="http://www.tcsdesignreno.com/fsw/wp-content/uploads/2014/12/158_WaterousLogoSm.jpg" alt="Waterous" width="155" height="29" /></a></p>
</div>

CSS：

h3 {
    background-color: #990000;
    color: #ffffff;
    padding: 10px 0;
    text-align: center;
    width: 100%;
    max-height:92px;
}

这是一张图片：

任何人都可以看到为什么这些部分以红色显示？对于我的生活，我似乎无法弄明白。

Answer 1

看起来你的花车没有清理。您可以将其添加到当前样式中：

.singlepost .content-entry h3 { 
  clear: both;
}