私のCSSは私の第2の部分に影響していません<section>タグ

Question

私はこの2番目のセクションタグを作る前に、このコードを持っている別のセクションがあります。ここで：

HTML

<div class="about-me-section"> 
<div class="about-me-overlay"> 
    <h1>Hi I'm Marielle,</h1> 
    <p>A web developer and self-enthusiast</p> 
</div> 
</div> 

CSS

.about-me-section { 
background: url(https://images.unsplash.com/photo-1498622601663-8277ceda5cb6?auto=format&fit=crop&w=791&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 100vh; 
    position: relative; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
} 

.about-me-section::before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: #0a1725; 
    opacity: .94; 
    z-index: 0; 
} 

.about-me-overlay { 
    flex: 1; 
    margin: auto; 
    color: white; 
    text-align: center; 
    z-index: 6; 
} 

.about-me-overlay p { 
    font-size: 1.5rem; 
} 

私はパディング、マージン、高さか、それを幅を追加しているとき今、私は、私の第二のセクションタグを設計しています私は私のCSSで行った変更を表示しません。

HTML

<section id="background-technologies"> 
<div class="techno-wrapper"> 
<h1>Services <hr class="header-style-bottom-2"></h1> 
</div> 
</section> 

CSS

#background-techonologies section { 
    max-width: 100%; 
    margin: 0; 
    padding: 0 2em; 
} 

#background-technologies h1 { 
    text-align: center; 
} 

#background-technologies .techno-wrapper { 
    margin: 0; 
    width: 100%; 
} 

は、ここでは、あなたのCSSのスペルエラーを持っている私のクロムのdevのツールで link here

Answer 1

ディスプレイのスクリーンショットです。 htmlのセクションIDは "＃background-technologies"ですが、cssでは "＃background-techonologies"です。