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

Menu 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; }

For readability: (only whitespace was changed)

/******************************* 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

Under 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;
}

Hey, 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; }

On 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!

Hi,

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; }

When you say your shade of green is "cut off," what exactly are you referring to?

Please check my workspace here. I don't think I'm explaining it correctly. http://web-wgov26byn7.treehouse-app.com/

I'm sorry; I can't seem to access it. Could you reload the page and keep it open? Thanks!

Let me know if this whttp://i58.tinypic.com/jkzku9.jpg

The 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.

Yes I am looking to remove the light green bar under the nav.

Awesome, it worked! Thanks for your help!

No problem!