Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

israel meza
PLUS
israel meza
Courses Plus Student 10,890 Points

Header shifted to the left

when I added new fonts to h1 and h2 the header shifted to the left. css doesnt seem to have and effect on the #logo id.

/***************************************** GENERAL *****************************************/

wrapper{

max-width:940px; margin:0 auto; padding:0 5%; }

a { text-decoration:none; } 

/***************************************** HEADING *****************************************/

logo {

text-align: center; margin: 0; }

/***************************************** COLOR ****************************************/

/* site body*/ body{ background-color:#fff; color:#999; }

/green header/ header{ background-color:#6ab47b; border-color:#599a68 }

/* nav background on mobile*/ nav{ background-color:#599a68; }

/logo text/ h1, h2{ color:#fff; }

/links/ a{ color:#6ab47b; }

/* nav links*/ nav a, nav a:visited{ color:#fff; }

/* selected nav links*/ nav a.selected, nav a:hover{ color:#32673f; }

4 Answers

Daniel Stopka
Daniel Stopka
13,520 Points

Hi, if you want to target id element, you need to put # in front of id name... so it should be #logo and also #wrapper...

Maarten Davidse
Maarten Davidse
2,329 Points

It is easy to miss certain mistakes if you write it like this. I gave your code a bit more space, so it is easier to read.

All classes need a . before the selector. All ID's need a # before the selector.

Also I noticed you made some mistakes in commenting out the following comments:

  • logo text
  • links
  • green header

And the a.selected selector does not exist. Maybe you meant a:active?

See below for some changes. I assumed you used ID's, so I gave all selectors a #. If you used a class, you can change the # into a .

/***************************************** GENERAL *****************************************/

#wrapper{
    max-width: 940px; 
    margin: 0 auto; 
    padding: 0 5%; 
}

a { 
    text-decoration: none; 
} 

/***************************************** HEADING *****************************************/

#logo {
    text-align: center; 
    margin: 0; 
}

/***************************************** COLOR ****************************************/

/* site body*/ 
body{ 
    background-color: #fff; 
    color: #999; 
}

/* green header */ 

header{ 
    background-color:#6ab47b; 
    border-color:#599a68 
}

/* nav background on mobile*/ 
#nav{ 
    background-color: #599a68; 
}

/*logo text*/
 h1, h2{ 
    color:#fff; 
}

/* links */ 
a{ 
    color:#6ab47b; 
}

/* nav links*/ 
#nav a, 
#nav a:visited{ 
    color:#fff; 
}

/* selected nav links*/ 
#nav a:active, 
#nav a:hover{ 
    color:#32673f; 
}
israel meza
PLUS
israel meza
Courses Plus Student 10,890 Points

I know i copied this from my workspace but Thats not how it looks in workspace. I didnt forget to put the # before ids. Also the links i commented with /* */.Anyways I downloaded the the zip file and compared it to my file. I couldnt spot the difference.

Maarten Davidse
Maarten Davidse
2,329 Points

Okay, Are you still stuck? I am not sure if I understand your question. You have a h2 and a h1 in your header, and when you changed the font, the complete header div moved to the left?

israel meza
PLUS
israel meza
Courses Plus Student 10,890 Points

yes, at some point my header div started to go back to the left, even though I put the value center on text-align.

israel meza
israel meza
Courses Plus Student 10,890 Points

Im now using the zip file main.css. It works fine