background-color stays white - html

Question

I'm building a website but for some reason my background-color is not working. Nothing happens, the background-color just stays white.
The code that is not working is below :
.sub-header {
background-color: black !important;
}
My complete code on jsfiddle: https://jsfiddle.net/j7mdqaop/ and the interesting lines are 158, 159, 160.

Answer 1

if i understand it correctly you are trying to do :
HTML
<header class="sub-header">
<div class="dropdown">
Chezzles
<i class="fa fa-bars fa-fw bars" style="font-size:24px"></i>
</div>
</header>
CSS
.sub-header {
background-color: black !important;
}
.sub-header .dropdown {
background-color: black !important;
width: 100%;
height: 25px;
padding: 5px;
}
.sub-header .dropdown * {
color: white;
}
.sub-header .dropdown i {
top: 15px;
}
.main-navbar-heading-2 {
top: 5px;
left: 5px;
text-decoration: none;
color: black;
font-family: Raleway;
font-size: 1.3em;
}
like this fiddle https://jsfiddle.net/Tanbi/j7mdqaop/4/

Answer 2

It's because all elements in your .sub-header are not in the flow (because of absolute position)
See this fiddle
.sub-header {
background-color: black !important;
display: block;
}
.main-navbar-heading-2 {
top: 5px;
left: 5px;
text-decoration: none;
color: black;
font-family: Raleway;
font-size: 1.3em;
}
Note : I add display: block; to make the background-color property occupy all the line instead of just the title "Chezzles" but you can keep inline if you wants.