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

Posted by james freyre
james freyre
526 Points

Why isn't my entire header turning green? Only the bottom part of the header where "Portfolio, Contact, and About" is.

The background color in the top header "James Freyre | Designer" stayed white while the lower part "Portfolio, Contact, and About" turned green. I'll add the CSS and HTML code.

james freyre
james freyre
526 Points

Here is my CSS code.

a {
  text-decoration: none;
}

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

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

a {
  color:"#6ab47b;
}

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

h1, h2 {
  color: #fff;
}  

nav {
  background: #599a68;
}

nav a:visited {
 color: #fff;
}

Here is the head and header section of the HTML code. 

<!DOCTYPE html>
<html> 
  <head>
    <meta charset="utf-8">
    <title>James Freyre | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
 </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>James Freyre</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="About.html">About</a></li>
          <li><a href="Contact.html">Contact</a></li>
        </ul>  
      </nav>
    </header>
      <div id="wrapper">
Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

For quoting code you need three accent symbols ("backticks") :point_right: ```
(not apostrophes ''')

2 Answers

Steven Parker
Steven Parker
243,656 Points
Steven Parker
Steven Parker
243,656 Points

You have some stray quote marks.

In front of two of your hex color codes (one for color, one for background) there is a stray quote mark (").

Remove those and "everything's green".

Andrew Shook
Andrew Shook
31,709 Points

Steven is right, in your styling of your a tags you have an opening quote between you colon after "color" and your hex color. Also, in your header styling you have opening quote between you colon after "background" and your hex color. I've marked the offending quotes with arrows (-> or <-) on either side.

a {
  color: ->"<- #6ab47b;
}

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

you need to remove those quotes so that your css looks like this :

a {
  color : #6ab47b;
}

header  {
  background : #6ab47b;
  border-color: #599a68;
}
james freyre
james freyre
526 Points
james freyre
james freyre
526 Points

Thank you so much Steven and Andrew. All is fixed now.