html - 整个 HTML block 没有接收 CSS 类样式

Question

我有一个带 class="hero" 的 HTML 部分和 CSS .hero然而，要设置样式，背景颜色似乎只应用于 <h1>元素位于 <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
------------------------------------------*/

<!--HERO SECTION-->
<section class="hero">
  <h1>Welcome to Foundation 6</h1>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra lobortis ligula, a porttitor sem porttitor consequat. Vestibulum ac massa non lorem cursus sodales. Fusce convallis nisl ex, a iaculis eros pulvinar id. Vestibulum consectetur eget augue convallis bibendum. Fusce tempus consectetur risus ac interdum. Aenean eu lacus eu metus egestas feugiat. Suspendisse sed venenatis metus, at lacinia elit. Praesent tristique placerat lacus. Interdum et malesuada fames ac ante ipsum primis in faucibus. In ullamcorper velit leo, quis interdum sapien dapibus non. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed suscipit massa eget mauris dictum, ut malesuada felis pulvinar. </p>
    <a href="#" class="button">Learn more</a>
    <a href="#" class="success button">Contact Us</a>
</section>    

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/