Using CSS to change span background color has no effect

Question

I have applied background-color: #C0C0C0; to my span element .grey_bg but the background is not changing color. Why is that?

    .grey_bg {

      width: 100%;

      background-color: #C0C0C0;

    }

<span class="grey_bg">
        <h1>Hey</h1>
    </span>

Answer 1

Because it's not really valid HTML to put block-level H1 element inside span (inline element). You can either use div instead of span

.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}

<div class="grey_bg"> 
    <h1>Hey</h1>
</div>

... or make span block-level too:

span {display: block;}
.grey_bg {
    width: 100%;
    background-color: #C0C0C0;
}

<span class="grey_bg"> 
    <h1>Hey</h1>
</span>

Answer 2

First your markup is not correct. You can't have a block element, h3, inside an inline element, span.

But in case you want to keep that markup, you have to make the container element to behave as block. So make it as:

.grey_bg { 
width: 100%; 
background-color: #C0C0C0; 
display:block;
}