Change background-color of element inside container-fluid

Question

How can I change the background color of my h3 element which is nested within a container-fluid element?

I've set a background color for the whole container fluid but I'd like the h3 element to have a different background-color. I imagine the h3 is underneath the container-fluid but I can't work out how to change the hierarchy.

Here's my html:

<section class="container-fluid" id="portfolio">

<h3 id="portfolio-title">PORTFOLIO</h3>

And the CSS:

.container-fluid {
padding: 0 !important;
}

#portfolio-title {
background-color: #2E3747;
}

#portfolio {
background-color: #EFF0F0;
}

Thanks for your help!

Solution 1

Try this CSS

#portfolio {
background-color: #EFF0F0;
}

#portfolio #portfolio-title {
background-color: #2E3747 !important;
}

I've just moved the portfolio up then h3 to down and made it important

Solution 2

Let's try this code

#porfolio:not(#portfolio-title) {
     background-color: #EFF0F0;
}



#portfolio-title {
     background-color: #2E3747;
}

Select .container-fluid but not porfolio-title.
Hope this help.