Question

I have been coding a website using html and css, and recently I’ve come to need a div element with a background color. I put in background-color: gray;, but that didn’t work. I used the inspect element feature of Google Chrome, and it says that Chrome doesn’t recognize the element. I used the same feature in Firefox, and it fails to recognize the css element either. The div contains three floating sections, but it uses overflow: auto, so that is not the problem. Can someone explain to me why I can’t add background color to my divs?

html:

<div id="main">
        <header>
        <h1>LOGO</h1>
        <nav>
            <a href="index.html" title="Home">Home</a>
            <a href="about.html" title="About">About</a>
            <a href="features.html" title="Features">Features</a>
            <a href="specs.html" title="Specifications">Specs</a>
            <a href="updates.html" title="Updates">Updates</a>
            <a href="contact.html" title="Contact Us">Contact</a>
        </nav>
        </header>

        <section class="left">
        <h2>NEWS</h2>
        <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p>
        </section>

        <section class="right">
        <h2>SOMETHING</h2>
        <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum simaiorrum accaerf erfercim voloremod ut volectem con cus, temoluptatur as disquatent.</p>
        </section>

        <section class="right">
        <h2>SOMETHING</h2>
        <p>Itate eaquid quodit, utem dolorenihit ullore ides est faccum
simaiorrum accaerf erfercim voloremod ut volectem con cus,
temoluptatur as disquatent.</p>
        </section>
    </div>

css:

#main {
    backgound: gray;
    layer-background: gray;
    overflow: auto;
    border: 2px dashed black;

    border-radius: 15px;
    -moz-border-radius: 15px;
}

section {
    background-color: green;
    text-align: justify;
    margin: 5px;
    padding 10px;

    border-radius: 10px;
    -moz-border-radius: 10px;
}

Answer 1

In this part of your CSS:

#main {
    backgound: gray;
    layer-background: gray;

    /* .. */
}

backgound should be background, and layer-background is not a CSS property.

With those mistakes fixed, what you have works.