Background color not changing from white

Question

For some reason the background color refuses to change from white. I am trying to get it to change from white to black under the header, but it refuses to change. Putting "background-color:" in the body SCSS doesn't seem to change it.

I am not sure if there is something in my SCSS that is simply over riding the background color without me realizing?

Any help is greatly appreciated

SCSS:

*{
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
background-color: '#010101';
}

#wrapperHeader {
width: 100vw;
height: 210px; /* height of the background image? */
background:url(images/header.png);
}

div#wrapperHeader div#header {
width: 100vw;
height:100px;
margin:0 auto;
}

div#wrapperHeader div#header img {
width: 100vw ; /* the width of the logo image */
height: 210px ; /* the height of the logo image */
margin:0 auto;
}

header {
color: white;
background-color: dimgrey ;
clear: left;
text-align: center;
}

.toggle_menu{
position: fixed;
padding: 17px 20px 15px 15px;
margin-top: 210px;
color: white;
cursor: pointer;
background-color: #000;
z-index: 1000000;
font-size: 2em;
opacity: 0;

}

.sidebar_menu{
position: fixed;
width: 100vh;
max-width: 250px;
margin-left: 0px;
overflow: hidden;
height: 100vh;
max-height: 100vh;
background-color: rgba(17, 17, 17, 0.9);
opacity: 0,9;
transition: all 0.3s  ease-in-out;
}

.fa-times{
right: 10px;
top: 10px;
opacity: 0.7;
cursor: pointer;
position: absolute;
color: red;
transition: all 0.3s  ease-in-out;

}

.fa-times:hover{
opacity: 1 ;
}

.boxed_item {
font-family: 'Open Sans';
font-weight: 200;
padding: 10px 20px;
display: inline-block;
border: solid 2px white;
box-sizing: border-box;
font-size: 22px;
color: white;
text-align: center;
margin-top: 70px;

}

.logo_bold{
font-weight: 800;
}

.logo_title{
color: white;
font-family: 'Open Sans';
font-weight: 200;
font-size: 12px;
text-align: center;
padding: 5px 0px;
}

.nav_selection{
margin: 0, 0;
display: block;
width: 200;
margin-top: 100px;
margin-left: 5px;

}

.nav_item{
font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s  ease-in-out;

}

.hide_menu{
margin-left: -250px;

}

.opacity_one{
opacity: 1;
}

.disabled {
pointer-events:none; //This makes it not clickable
opacity:0.6; 

font-weight: 200;
font-family: 'Open Sans';
color: white;
padding: 15px 0;
font-size: 20px;
color: #D8D8D8;
border-bottom: solid 2px #D8D8D8;
transition: all 0.3s  ease-in-out;
}

Answer 1

At three place you have give the background color code in three different style. Please follow anyone format.

1. Never give the color in the quotation mark. You have given it in *{ background-color: '#010101'; } *{ background-color: '#010101'; } remember that. It should be *{ background-color: #010101; } *{ background-color: #010101; } .
2. You have given background-color: dimgrey ; so each time the color name is not working you have gave the color code for that.

This is header part for which you have to make change. for dimgrey the color code is: #696969 so your code will be:

header {
color: white;
background-color: #696969; // check this line.
clear: left;
text-align: center;
}

It will make the change in the header parts background color. you have to check only that part.

3. It may be possible that other style will be override the background of header. In that case you have to put the !important in the code like this:

---

header {
color: white;
background-color: #696969 !important; // check this line.
clear: left;
text-align: center;
}

Let me know if it help you.

Answer 2

Change background-color: '#010101'; this to background-color: '#010101!important';