CSS External Selector not Working for section ID

Question

I am trying to add CSS to the "hero section" of the HTML but when I use the .hero external CSS selector, nothing happens to the format of the section. What am I doing wrong or what is happening with the external stylesheet that nothing seems to be linking to the html section id's anymore, but all previous styling in my header remains?

HTML

 <!--Hero-->
        <section class="hero">
            <h2 class ="statement">Enter Phrase Here**</h2>
        </section>

        <!--About Me-->
        <section id="about-me">
        <h2 class="section-heading">About Me</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita minus consequatur non. Ea consectetur impedit accusamus perspiciatis delectus fuga officia aspernatur maiores maxime modi, ad neque. Ratione architecto quaerat reprehenderit.</p>
        </section>

        <!--Projects/Work-->
        <section id="projects">
            <h2 class = "section-heading">My Work</h2>

CSS

:root{
    --primary-color: #40A7B2;
    --main-bg-color: #d8e2e3;
    --accent-blue: #01144A;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    color: var(--primary-color);
}
/* Header/Nav */
header{
    display: flex;
    background-color: rgb(8, 8, 8);
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 35px;
}
header h1 a{
    font-weight: bold;
    background-color: var(--primary-color);
    padding-left: 50px;
    color: rgb(8, 8, 8);
    margin-left: -20px;

}
header nav{
    margin: 7px 0;
    display: flex;
    justify-content: space-between;
   
}
header nav ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
header nav ul li a{
    padding: 10px 15px;
    font-weight: lighter;
    font-size: 30px;
}
header a{
    color: var(--primary-color);
}
/* Section Headings */
.section-heading{
    color: #01144A;
}

/* Hero */
.hero{
    background-image: url(./assets/images/hero.bg.jpg);
    width: 100%;
 
}
.statement{
    color: var(--accent-blue) ;
}

@user18074821 Yes, all of the CSS declarations for the header work and are displaying when I pull up the index.html file — mberti13

Orius Orius · Accepted Answer · 2022-02-15T20:00:14

It works fine, I've just checked with a different bg image. I guess the link to your bg image is just broken.

CSS External Selector not Working for section ID

1 Answers