スクロールバーが表示されず、2 divの間のスペース

Question

Hy、自分のサイトを作成しようとしました。プロコードではありませんが、私は良いと思います：D 私の問題は、スクロールバーが隠され、2つのヒーローセクションの間にスペースがあることです。何が問題ですか？ええと、4つのヒーローがあり、同じCSSコードがあります。

.hero1 { 
 
     background-color: white; 
 
     width: 100%; 
 
     height: 500px; 
 
     display: inline-block; 
 
     margin-top: 100px; 
 
     align-items: center; 
 
    
 
     h1 { 
 
     font-family: "Open Sans", sans-serif; 
 
     font-weight: 300; 
 
     color: black; 
 
     margin-left: 100px; 
 
     position: absolute; 
 
     top: 30%; 
 
     } 
 
     p { 
 
     position: absolute; 
 
     top: 30%; 
 
     font-family: "Open Sans", sans-serif; 
 
     font-weight: 400; 
 
     color: black; 
 
     margin-left: 40%; 
 
     margin-right: 10%; 
 
     } 
 
    } 
 
    

<div id="about" class="hero1"> 
 
     <h1> About me</h1> 
 
     <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, est sit amet bibendum posuere, diam magna sagittis arcu, et mollis quam felis mattis est. 
 
      Suspendisse malesuada lobortis tempor. Vestibulum quis ligula elit. Sed porttitor sed diam id dapibus. Etiam nec tincidunt dolor, vel auctor dolor. Cras enim velit, 
 
      vulputate in interdum in, aliquet in quam. Sed volutpat, nunc id viverra blandit, diam nulla luctus ipsum, eget condimentum felis metus eget ante. Nam pulvinar convallis 
 
      eros eget consectetur.</p> 
 
    </div>

Answer 1

私は、問題を発見したかもしれないと思います。あなたの例にはいくつかのタイプミスがあり、hero1クラスに欠けている "}"がありました。

これはあなたの問題

.hero1 { 
 
    background-color: white; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: inline-block; 
 
    margin-top: 100px; 
 
    align-items: center; 
 
} /* you were missing this brace */ 
 
h1 { 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 300; 
 
    color: black; 
 
    margin-left: 100px; 
 
    position: absolute; 
 
    top: 30%; 
 
} 
 
p { 
 
    position: absolute; 
 
    top: 30%; 
 
    font-family: "Open Sans", sans-serif; 
 
    font-weight: 400; 
 
    color: black; 
 
    margin-left: 40%; 
 
    margin-right: 10%; 
 
} 
 
/* and had an extra one here */

<div id="about" class="hero1"> 
 
    <h1> About me</h1> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean imperdiet, est sit amet bibendum posuere, diam magna sagittis arcu, et mollis quam felis mattis est. Suspendisse malesuada lobortis tempor. Vestibulum quis ligula elit. Sed porttitor sed 
 
    diam id dapibus. Etiam nec tincidunt dolor, vel auctor dolor. Cras enim velit, vulputate in interdum in, aliquet in quam. Sed volutpat, nunc id viverra blandit, diam nulla luctus ipsum, eget condimentum felis metus eget ante. Nam pulvinar convallis 
 
    eros eget consectetur.</p> 
 
</div>