Why does my "around the text" area take the color of the whole page and not the color of t-CodePudding

For some reason the area around the text has background color. It takes the color of the whole page (*) and not the color of the navigation bar. I just want it to be pure text without any kind of padding or background color. Thanks in advance!

*{
    padding:0;
    margin:0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
    background-color: lightgray;
}

header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:30px 5%;
    background-color: grey;
}

<!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>Title</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <header>
            <div >
                <h4>Paper</h4>
            </div>
            <nav>
                <ul >
                    <li><a  href="#">Cart</a></li>
                    <li><a  href="#">Account</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>

CodePudding user response：

You need to remove background-color: lightgray from the

`*{

padding:0;
margin:0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
}`

(*) means every element should take this particular style. Or if you want your entire body to have that background color you could give only the navbar a certain background color and set it to important. Better still its best to not give every element that background color in order to stop future problems or confusion. Create a div and give that the style. The div would contain every other thing except for the navbar. Do it this way:

<!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>Title</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <header><nav style='background-color:'red'>
            <div >
                <h4>Paper</h4>
            </div>
            
                <ul >
                    <li><a  href="#">Cart</a></li>
                    <li><a  href="#">Account</a></li>
                </ul>
            </nav>
        </header>
    <div class='container' style='background-color: lightgray'></div>
    </body>
</html>

CodePudding user response：

Avoid using the * selector except when really necessary. Use styles that apply to selectors that match elements.

Try this css code:

*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    padding:0;
    margin:0;
    background-color: lightgray;
}
a {
    text-decoration: none;
}

header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding:30px 5%;
    background-color: grey;
}

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

<!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>Title</title>
        <link rel="stylesheet" href="styles.css" />
    </head>

    <body>
        <header>
            <div >
                <h4>Paper</h4>
            </div>
            <nav>
                <ul >
                    <li><a  href="#">Cart</a></li>
                    <li><a  href="#">Account</a></li>
                </ul>
            </nav>
        </header>
    </body>
</html>