Background leaking through

Hello There.

Somehow my general background color is leaking through a more specific background color.

It leaks in just a narrow band beneath the pictures (that are also hiperlinks…)

Any ideais on what is going on?

Thanks,
Allison


Hi Allison,

Could you post the entirety of your code?

Thank you!

sure

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">
    <title>My Projects</title>
    <link rel="stylesheet" href="./resources/css/index.css">
</head>

<body>

   <!-- Navbar Section -->
    <nav class="navbar">
        <h3><a href="./aboutMe.html">About Me</a></h3>
        <h3><a href="./projects.html">Projects</a></h3>
        <h3><a href="./certificates.html">Certificates</a></h3>
        <h3><a href="./contact.html">Hey, talk to me!</a></h3>
       
    </nav>


    <!-- Logo Section -->
    <div class="logo">
        <a href="./index.html"><img src="./resources/images/logo.jpg"></a>

    </div>

    <!-- Certificate Board -->

    <div class="board">
        <a href="./resources/certificates/Python3.pdf" target="_blank"><img src="./resources/images/Python3_jpeg.jps"></a>
        <span id="html"><a href="./resources/certificates/html.pdf" target="_blank"><img src="./resources/images/html.jpg"></a></span>
        <a href="./resources/certificates/code101.pdf" target="_blank"><img src="./resources/images/101.jpg"></a>
    </div>
        

</body>

CSS:


/* NAVBAR SECTION */

.navbar{
    background-color:rgb(34, 31, 31);
    color: white;
    position:fixed;
    margin-top: 150px;
    height: 100%;
    width: 150px;
    z-index: 10;
    
    

}

.navbar h3{
    text-align: center;
    border: 1px solid grey;
    height: 50px;
    margin-top: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding-top: 25px;
    margin-bottom: 0;
    font-size: 15px;
    background-color:rgb(43, 43, 43)
}

.navbar h3 a{
    text-decoration: none;
    color:aliceblue;
    background-color:rgb(43, 43, 43) ;
}

.logo{
    width: 150px;
    padding-top: 0;
    
    
}

.logo img{
    width: 150px;
    height: 150px;
    position:fixed;
    padding-top: 0;
    
    
}

/* HOME SECTION */
.main{
    color: white;
    padding-left: 200px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            
    
}

.main h1{
    font-size: 70px;
    margin-top: 0px;
    padding-top: 30px;
}

.about_body h1{

    color:aliceblue;

}

*{
    background-color: black;
}

.inline{
    display: inline-block;
}

#special_A{
    color: crimson;
    text-decoration:underline;
    text-decoration-color: rgb(109, 78, 78);
    
    
}



/* ABOUT ME SECTION */
#about_text h2{
    color:aqua;
    font-size: 60px;
    margin-top: 0;
    padding-top: 50px;
    


}

#about_text p{
    font-size: 20px;
    width: 500px;
    text-align:justify;
    margin: 15px 0px;
    
    
}

#picture{
    height: 120px;
    width: 120px;
    display: inline-block;
    margin: 1px;
    padding: 1px;
    overflow: visible;
    z-index: 10;
    
    
        
}

/* CERTIFICATES SECTION */
.board img{

    margin: 1px;
    padding-left: 200px;
    border: 1px black;
    width: 300px;
    height: auto;
    padding-top: 50px;
    background: transparent;

}

.board{

    background:black;
    width: auto;
    padding: 1px;
}

#html{
    padding: 10px;
}

/* PROJECTS SECTION */

#under_construction{
    margin-left: 300px;
    margin-top: 100px;
    
}

/* CONTACT SECTION */

form li{
    color:white;
    margin-left: 200px;
    padding-top: 50px;
    position: relative;
    font-family: Helvetica;
    font-weight: bold;
}

#name{
    margin-top: 100px;
    
    
}

ul{
    list-style: none;
}

#msg{
    height: 150px;
    width: 250px;
    
}

.form{
    background-color: white;

Thank you, I wanted to be able to inspect it myself!

So, the problem you’re having comes from the * selector. * selects ALL elements on your webpage.

Notice all of this:



Because all of your elements are being selected with the * selector, all of these overflowing elements are being given a background-color of black.