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
Carlo Ferrara
583 PointsMenu off
My nav is not giving me the full shade of dark green over my header, it is cut off a little. What am I doing wrong?
/******************************* GENERAL ********************************/ body { font-family: 'Open Sans, sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration:none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/******************************* HEADING ********************************/
header { float: left; margin: 0 0 3Opx 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px o; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 {
font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/******************************* Navigation ********************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/******************************* Footer ********************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************************* PAGE: PORTFOLIO ********************************/
gallery {
margin: 0; padding: 0; list-style: none; }
gallery li {
float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/******************************* PAGE: ABOUT ********************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/******************************* COLORS *******************************/ / site body */ body { background-color: #fff; color: #999; }
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/LINKS/ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
9 Answers
Ryan Duchene
Courses Plus Student 46,022 PointsUnder your big NAVIGATION comment header, you should have a rule that looks like this:
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0;
}
Replace it with this:
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
Katie Purdy
56,547 PointsHey, Carlo!
I see some typos that might be throwing things off a bit. Missing a closing quotation mark. Corrected version:
body { font-family: 'Open Sans', sans-serif; }
There's an O instead of a 0 in the header margin declaration. Corrected version:
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
There was also an extra o in the h1 margin declaration. Corrected version:
h1 { font-family: 'Changa One', sans-serif; margin: 15px; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
Ryan Duchene
Courses Plus Student 46,022 PointsOn top of what Katie has pointed out, you're missing a quote in the body font rule. It should be like this:
body {
font-family: 'Open Sans', sans-serif;
}
And you're also not commenting your code properly near the bottom of your file. You wrapped the word /LINK/ with regular slashes. It should be /* LINK */.
Also, in your gallery rules, it looks like you're trying to select a gallery, but you're trying to select an HTML element, rather than a class. Trying prefixing gallery with a period, like this:
.gallery {
margin: 0;
padding: 0;
list-style: none;
}
.gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
.gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
Hope this helps! Have a great day!
Carlo Ferrara
583 PointsHi,
I updated it here. Still giving me the same issue.
/******************************* GENERAL ********************************/ body { font-family: 'Open Sans', sans-serif; }
wrapper {
max-width: 940px; margin: 0 auto; padding: 0 5%; }
a { text-decoration:none; }
img { max-width: 100%; }
h3 { margin: 0 0 1em 0; }
/******************************* HEADING ********************************/
header { float: left; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }
logo {
text-align: center; margin: 0; }
h1 { font-family: 'Changa One', sans-serif; margin: 15px; font-size: 1.75em; font-weight: normal; line-height: 0.8em; }
h2 {
font-size: 0.75em; margin: -5px 0 0; font-weight: normal; }
/******************************* Navigation ********************************/
nav { text-align: center; padding: 10px 0; margin: 20px 0; }
nav ul { list-style: none; margin: 0 10px; padding: 0; }
nav li { display: inline-block; }
nav a { font-weight: 800; padding: 15px 10px; }
/******************************* Footer ********************************/
footer { font-size: 0.75em; text-align: center; clear: both; padding-top: 50px; color: #ccc; }
.social-icon { width: 20px; height: 20px; margin: 0 5px; }
/******************************* PAGE: PORTFOLIO ********************************/
.gallery { margin: 0; padding: 0; list-style: none; }
.gallery li { float: left; width: 45%; margin: 2.5%; background-color: #f5f5f5; color: #bdc3c7; }
.gallery li a p {
margin: 0;
padding: 5%;
font-size: 0.75em;
color: #bdc3c7;
}
/******************************* PAGE: ABOUT ********************************/
.profile-photo { display: block; max-width: 150px; margin: 0 auto 30px; border-radius: 100%; }
/******************************* COLORS *******************************/ / site body */ body { background-color: #fff; color: #999; }
/* green header */
header {
background: #6ab47b;
border-color: #599a68;
}
/* nav background on mobile devices */ nav { background: #599a68; }
/* logo text */ h1, h2 { color: #fff; }
/* LINKS */ a { color: #6ab47b; }
/* nav link */ nav a, nav a:visited { color: #fff; }
/* selected nav link */ nav a.selected, nav a:hover { color: #32673f; }
Ryan Duchene
Courses Plus Student 46,022 PointsWhen you say your shade of green is "cut off," what exactly are you referring to?
Carlo Ferrara
583 PointsPlease check my workspace here. I don't think I'm explaining it correctly. http://web-wgov26byn7.treehouse-app.com/
Ryan Duchene
Courses Plus Student 46,022 PointsI'm sorry; I can't seem to access it. Could you reload the page and keep it open? Thanks!
Carlo Ferrara
583 PointsLet me know if this whttp://i58.tinypic.com/jkzku9.jpg
Ryan Duchene
Courses Plus Student 46,022 PointsThe picture helps, but it would definitely be a lot easier if you could leave a Workspace open on your browser.
I caught another syntax error just now. After the big COLORS comment header, you're missing an asterisk before the first comment.
Now, do you want to remove the light green bar beneath the nav? Is that what you're trying to do? I'm not quite sure what you're trying to say.
Carlo Ferrara
583 PointsYes I am looking to remove the light green bar under the nav.
Carlo Ferrara
583 PointsAwesome, it worked! Thanks for your help!
Ryan Duchene
Courses Plus Student 46,022 PointsNo problem!
Ryan Duchene
Courses Plus Student 46,022 PointsRyan Duchene
Courses Plus Student 46,022 PointsFor readability: (only whitespace was changed)