Centering Header and * {} function

Question

site: sunnysihota.com
The header isn't centered.  The problem is when I use the * {} function I get it centered but I can't change the text color of my titles to anything else since the * {} function overrides all text color.  So I got rid of the * {} function and used the code below but then the header isn't centering or changing to the right color
code:
header {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
body {
    background-color:#F0EFE9;
}
nav, #footer {
background-color: #A67829;
margin-top: 20px;
padding: 10px 0px 5px 0px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;
}
.images {
    margin-top: 20px;
    padding: 10px 0px 5px 0px;
}
.names {
    line-height: 0.75em;
    color: #4C607A;
    text-align: center;
    font-family: Arial;
}
.article {
    height:250px;
    font-family: Arial, Verdana, sans-serif;
    color: #665544;
    text-align: center;
}
li {
    display: inline;
    padding: 5px;
}

Sharon Walls · Accepted Answer

Hi Rajinder,
You forgot the id selector:
#header {font-family: Arial, Verdana, sans-serif; color: #665544; text-align: center;}
Or, if you're planning to use HTML5 semantic elements (http://www.impressivewebs.com/targeting-html5-css), you'll need to specify this in your HTML file. Right now you're doing one concept in your CSS and the other in your HTML.

Welcome to the Treehouse Community

Looking to learn something new?

Rajinder Sihota

Rajinder Sihota

Centering Header and * {} function

nav, #footer {

1 Answer

Sharon Walls

Sharon Walls

Rajinder Sihota

Rajinder Sihota