CSS navbar background showing up as white instead of transparent-CodePudding

My navbar background keeps showing up as white instead of transparent no matter what I do.

CSS

body{
    margin: 0;
    line-height: 1.5;
    font-size: 16px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a{
    text-decoration: none;
}

:before,:after{
    box-sizing: border-box;
}

img{
    max-width: 100%;
    vertical-align: middle;
}

.container{
    max-width: 1140px;
    margin: auto;
    margin-left: 10%;
}

header,
section,
footer{
    display: block;
    width: 100%;
}

.row{
    display: flex;
    flex-wrap: wrap;
}

.justify-content-between{
    justify-content: space-between;
}

.align-items-center{
    align-items: center;
}

.header .logo{
    padding: 0 15px;
    width: 125px;
    height: auto;
}

.header .nav{
    padding: 0 15px;
}

.header .nav ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.header .nav ul li{
    display: inline-block;
    margin-left: 30px;
}

.header .nav ul li a{
    display: block;
    padding: 25px 50px;
    font: 18px sans-serif;
    color: #5D5D5D;
}

.home-section{
    min-height: 100vh;
    background-color: gray;
}

.home-section .row{
    min-height: 100vh;
}

.home-section .slide{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.home-section .slide:before{
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Neil O'Mara | Portfolio</title>
</head>
<body>
    <header >
        <div >
            <div >
                <div >
                    <a href="index.html"><img src="/logo.png" alt="logo"></a>
                </div>
                <div >
                    <ul>
                        <li><a href="index.html">HOME</a></li>
                        <li><a href="bio.html">BIO</a></li>
                        <li><a href="portfolio.html">PORTFOLIO</a></li>
                        <li><a href="resume.html">RESUME</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <section >
        <div  style="background-image: url('bimg1.jpg');">
            <div >

            </div>
        </div>
    </section>
</body>
</html>

CodePudding user response：

What is your expected result? The default browser background color is white. It looks like the header section is not overlapping with the content of the page, and that's why it's still white.

You could add the following code to set a custom background color for the header

header {
  background-color: rgba(0,0,0,0.7);
}

CodePudding user response：

You haven't defined any styles related to background or opacity on the header

Try:

header {
    background: red;
    opacity: 50%;
}