[*" at 0.0 transparency](https://i.stack.imgur.com/V5fil.png) [*" at 0.5 transparency](https://i.stack.imgur.com/gfSNP.png) [*" at 1.0 transparency](https://i.stack.imgur.com/yxOrn.png)
The problem is that the "*" tag is taking a higher specificity over the "header" tag which should not be the case.
I placed the header element in a class, that didn't solve the problem.I also gave the header and id which also didn't work.I also gave the header element an "!important" tag but that also didnt workand as a last ditch effort I increased the z-index of the header to 1000 nad lowered the "z-index" of the "*" to 1 which also didn't help
@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Encode+Sans:wght@500&display=swap");
* {
color: rgba(255,255,255,0.5);
background-color: rgba(36,37,42,1);
}
header{
background-color: aquamarine;
min-height: 80px;
top: 0;
padding: 0;
position: sticky;
display: flex;
justify-content: flex-end;
z-index: 1000;
}
.navbar {
font-family: "Montserrat", sans-serif;
font-weight: 500;
font-size: 1em;
width: 100%;
height: 20%;
padding-bottom: 0;
position: sticky;
top: 0;
}
.main-nav{
float: right;
}
.logo img {
height: auto;
width: 12%;
padding: 0.5%;
}<!DOCTYPE html>
<html>
<head>
<link href="CSS/main.css" rel="stylesheet" type="text/css" />
</head>
<header>
<nav class="navbar" role="navigation">
<a href="BOB.html" class="logo">
<img src="#" alt="BOB Logo"/>
</a>
<div class="main-nav">
<ul>
<li class="nav-links active">
<a href="#" class="nav-links active">Home</a>
</li>
<li class="nav-links">
<a href="#" class="nav-links">Stationary</a>
</li>
<li class="nav-links">
<a href="#" class="nav-links">Furniture</a>
</li>
<li class="nav-links">
<a href="#" class="nav-links">About Us</a>
</li>
</ul>
</div>
</nav>
</header>
</html>
*.<header>must be inside the<body>tag, not in<head><header>, like<navbar>etc. And asterisk*affects them and fills them withbackground-color: rgba(36,37,42,1);header * {background-color: transparent}- it can be fixed your problem.