CODEWITHSUNDEEP
htmlcss
laura42
laura42

Reputation: 39

Added page background color, header color disappears

I have a header div where I would like to show one color. When I added color to the entire background, the header color does not show anymore.

Here is the HTML:

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="shortcut icon" href="images/logo.png">
</head>
<body>

<div class='grid'>
    <div class='header'>
        <div class='col4head'>
            <a><img src="images/logoname.png"></a>
        </div>
        <div class='col8head'>
            <p>name<br/>title</p>
        </div>
    </div>  
    <hr/>

Here is the CSS:

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
background-color: #e9ece5;

}

.grid {
column-count: 12;
}

.header {
width: 100%;
max-height: 70px;
display: flex;
overflow: auto;
background-color: #c0dfd9;


.header a img {
max-height: 70px;
position: fixed;
}

Upvotes: 0

Views: 127

Answers (1)

Timon
Timon

Reputation: 2702

Two things:

  • You're missing a closing curly brace at the .header of your CSS.

  • With the * selector you are targeting every element on your page, I would advise you to put the background color on your body element e.g.:

    body {
  background-color: red;
}

Upvotes: 4

Related Questions