Cant specify background color on header - html

Question

I can't seem to specify the color on the header for my website.
The code is here:
.header {
height: 95vh;
background-size: cover;
background-position: top;
position: relative;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
&__logo {
height: 35px;
transform: scale(1.5);
z-index: 4;
}
&__text-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 5;
}
}
.video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
z-index: -1;
object-fit: cover;
}
.gradient {
background: linear-gradient(
90deg,
rgba(30, 95, 156, 1) 1%,
rgba(16, 55, 130, 0.2637429971988795) 100%
);
z-index: 2;
min-width: 100%;
min-height: 100%;
height: calc(100vh - 80px);
object-fit: cover;
position: relative;
}
.hor-nav{
position: fixed;
top: 40px;
right: 40px;
height: 50px;
z-index: 20;
color: $color-white;
}
ul{
list-style-type: none;
color:$color-white;
}
li {
float: left;
}
li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.header-bg{
background-color:#2998ff;
}
<header class="header">
<div class="gradient">
</div>
<video autoplay muted loop class="video">
<source src="img/bg-video.mp4" type="video/mp4" />
</video>
<div class="header-bg">
<div class="header__logo-box">
<img src="http://logos.xmltv.se/en.tlc.discovery.dk.png" alt="logo" class="header__logo" />
</div>
<div class="hor-nav">
<ul>
<li>Home</li>
<li>About </li>
<li>Invest</li>
<li>Insights</li>
<li>Technology</li>
<li>Performance</li>
<li>Education</li>
</ul>
</div></div>
</header>
I want to put the background color of #2998ff; to my header The background needs to be placed behind the navigation and the logo.
I've tried putting it in one div .header-bg and it still dosen't seem to work the way I want it to work.

Answer 1

<div style="background-color:#2998ff;"></div>
You should try something like this

Answer 2

Sometimes style definitions can overlap others. Try using !important at the end of the background-color declaration.

Answer 3

There's a few things going on.
browser web tools
All of these can be expiremented and tested in real time by using right click -> inspect element, or open web dev tools. If you're doing anything with web developement, they are insanely useful. Learn how to use them.
Invalid CSS
& is not a valid operator in CSS. If you're using a pre-processor like LESS, you need to run it to output CSS the browser can understand.
&__logo-box {
position: absolute;
top: 4rem;
left: 4rem;
z-index: 4;
}
Which CSS Selector do you want?
If you want to select all <header> elements, you would use
header {
background-color: red;
}
If you want anyone with the class name header use:
.header {
background-color: red;
}
If you want only one specific element that has the ID of header, use:
#header {
background-color: red;
}
If you want any div that's a child of header:
header div {
background-color: red;
}
Search for "css tutorials" and the word "selectors" for more info.
css overwriting?
Sometimes style definitions can overlap others
It's not this case of overwiting this time. Check your webpage with browser's DOM inspector / web tools. The header background is being set if you use the header selector. Select the element you want, to see all of it's computed CSS properties.
There's overlapping divs with transparency, making it harder to tell. Set all elements to a solid background color, to see. You'll probably need to add padding or margin to see them. Otherwise, the header div covers your header.
Mentioned above inline CSS
You do not want inline CSS, like this:
<div style="background-color:#2998ff"></div>
That will increase filesize and makes it harder to mantain code. It's a lot more work to make any change. Instead, use the right combinations of selectors. You can use heirarchy (like the first <p> element inside a <header>), or by classes, or by Ids. You can use multiple css classes on a single element. (I can't tell from the markup what you are expecting. You're probably overcomplicating the layout.