HTML的整个块没有接收CSS类样式

Question

我有这个带有class="hero"的HTML部分和CSS .hero来设置样式，但是，背景颜色似乎只应用于位于{{{1}的<h1>元素1}}部分。它未应用于位于同一部分的<section class="hero">代码或<p>代码。请帮忙。

<a>

/*-----------------------------------------
GENERAL
------------------------------------------*/
.wrap{
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
}



/*-----------------------------------------
NAV
------------------------------------------*/





/*-----------------------------------------
HERO
------------------------------------------*/
.hero {
    background-color: #999;
    padding: 80px 0px;
    height: 20px;
}


/*-----------------------------------------
MAIN SECTION
------------------------------------------*/




/*-----------------------------------------
FOOTER
------------------------------------------*/

Answer 1

背景颜色仅延伸到指定的高度。删除它，背景颜色将应用于整个英雄部分。

改变这个：

.hero {
    background-color: #999;
    padding: 80px 0px;
    height: 20px; <<-- REMOVE THIS
}

对此：

.hero {
    background-color: #999;
    padding: 80px 0px;
}

jsFiddle：https://jsfiddle.net/e0d8my79/189/