HTMLの全ブロックがCSSクラススタイルを受け取っていません

Question

このHTMLセクションはclass="hero"とCSS .heroになっていますが、背景色は<section class="hero">セクションにある<h1>要素にのみ適用されているようです。同じセクションにある<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/