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 Carah Burrell
Carah Burrell
575 Points

"How to Build a Website" trouble. h1 and h2 not working for me anymore?

Hi! I'm new to web design and having trouble knowing what isn't working and why and would really appreciate some help! I'm on the How To Build a Website track and can't seem to get the h1 and h2 and green color behind them to render anymore. Thanks!

Here's my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Carah Burrell | Awesome Person</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
      <h1>Carah Burrell</h1>
      <h2>Awesome Girl</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">
      <section>
      <ul>
        <li>
          <a href="img/numbers-o1.jpg"></a>
            <img src="img/numbers-01.jpg" alt="">
            <p>Whoa look at this color and texture crap!</p>
        <a/>
        </li>
         <li>
          <a href="img/numbers-o2.jpg"></a>
            <img src="img/numbers-02.jpg" alt="">
            <p>Blend some colors with me!</p>
        <a/>
        </li>
         <li>
          <a href="img/numbers-o6.jpg"></a>
            <img src="img/numbers-06.jpg" alt="">
            <p>Where my 80s babies at?!</p>
        <a/>
        </li> <li>
          <a href="img/numbers-o9.jpg"></a>
            <img src="img/numbers-09.jpg" alt="">
            <p>Photoshop ruuuulz</p>
        <a/>
        </li> <li>
          <a href="img/numbers-12.jpg"></a>
            <img src="img/numbers-12.jpg" alt="">
            <p>Yeah! Stripes!</p>
        <a/>
        </li>
          </ul>
            </section>
              <footer>
                <a href="http://twitter.com/carahrulez">
                <img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
                <a href="http://facebook.com/carahburrell">
                <img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2014 Carah Burrell.</p>
      </footer>
      </div>
  </body>
</html>

Here is my CSS:

/**************
GERNERAL 
**************/

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

a {
 text-decoration:none; 
}

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

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

h1 {
 font-family: 'Changa One', sans-serfif; 
  font-family: 15px 0; 
  font-size: 1.75em; 
}

/**************
COLORS  
**************/

/* site body THIS IS A COMMENT*/
body {
  background-color: #fff;
  color: #999;
}

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

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

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

a {
 color: #6ab47b; 
}

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

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

3 Answers

Damian Ison
Damian Ison
6,398 Points

Hi Carah,

In your CSS you need to have a '#' infront if your doing colours. Dont forget, it is the small things you screw up which will annoy you the most.

Below is the correct code

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

Awesome to see another Aussie on here

Matija Komorčec
Matija Komorčec
13,123 Points
Matija Komorčec
Matija Komorčec
13,123 Points

I think the problem is that you put both of your h tags into a single a tag. 

 <a href="index.html" id="logo">
      <h1>Carah Burrell</h1>
      <h2>Awesome Girl</h2>
 </a>

You should put only one heading in the tag, or none of them. I don't remember if you have to put anything in the a tag. Try it like this:

 <a href="index.html" id="logo"></a>
      <h1>Carah Burrell</h1>
      <h2>Awesome Girl</h2>
Carah Burrell
Carah Burrell
575 Points
Carah Burrell
Carah Burrell
575 Points

Ahhhh much better! Thanks mate ;)