I'm having trouble removing the black background from the navigation. It doesn't appear to be styled in black when I inspect each element individually.
Here is an image showing the issue:
https://i.stack.imgur.com/gvbn8.png
@charset "UTF-8";
/* CSS Document */
* {
background-color: black;
}
body,
html {
margin: 0;
padding: 0;
}
video {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 1;
}
.text {
background: rgba(0, 0, 0, 0);
z-index: 3;
position: relative;
color: white;
font-family: Helvetica;
text-align: left;
padding-top: 50px;
top: 0;
bottom: 0;
left: 0;
right: 0;
font-size: 30px;
letter-spacing: 8px;
text-transform: capitalize;
padding-left: 40px;
}
// More CSS here ...
<div class="banner">
<video poster="pic.png" autoplay="true" loop="loop" muted>
<source src="Melanie.mp4" type="video/mp4">
<source src="Melanie.webm" type="video/webm">
</video>
<div class="text">MELANIE PULLEN</div>
<div class="contact"><a href="#">Contact</a></div>
<div id="nav">
<ul>
<li><a href="#">WORK </a></li>
<li><a href="#">INSTALLATIONS </a></li>
<li><a href="#">CRIME SCENES </a></li>
<li><a href="#">BIOGRAPHY </a></li>
<li><a href="#">PRESS</a></li>
</ul>
</div>
</div>