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 trialisrael meza
Courses Plus Student 10,890 PointsHeader 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
13,520 PointsHi, 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
2,329 PointsIt 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
Courses Plus Student 10,890 PointsI 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
2,329 PointsOkay, 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
Courses Plus Student 10,890 Pointsyes, 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
Courses Plus Student 10,890 PointsIm now using the zip file main.css. It works fine