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 How to Make a Website Customizing Colors and Fonts Use Color in CSS

Help.

Havin trouble producing the same results shown in the instructional video. Any problems with my code?

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trevor Cleworth | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
    <a href="index.html">
    <h1>Trevor Cleworth</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">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Design of the times.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Tring to create 80s style globes.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Drips created using PhotoShop brushes.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>   
            </a>
          </li>        
        </ul>
      </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo">
        <a href="http://facebook.com/trevorcleworth"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a>
        <p>&copy; 2014 Trevor Cleworth</p>
      </footer>
    </div>    
  </body>
</html>
CSS

a {
  text-decoration: none;
}

#wrapper{
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
  background: orange;
}
#logo{text-align: center
      margin: 0;
}

a {color: 6ab47b;
}

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

h1, h2 {color: #fff;
}

9 Answers

Hi trevor, Looks like theres a semi colon missing here

logo{text-align: center

see if that fixes it.

jase richards
jase richards
10,379 Points

Yeah, Rohan is right. There I no end to that line of code it's reading it as

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

What you want is

logo {

text-align: center;

margin: 0;

}

Ahhh thank you gentlemen!

Well, it didn't fix it. When I open the workspace preview the webpage still fails to show up like the one in the example video.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Trevor Cleworth | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
    <a href="index.html">
    <h1>Trevor Cleworth</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">
      <section>
        <ul>
          <li>
            <a href="img/numbers-01.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Experimentation with color and texture.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>Design of the times.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Tring to create 80s style globes.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-01.jpg" alt="">
              <p>Drips created using PhotoShop brushes.</p>   
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>Creating shapes using repetition.</p>   
            </a>
          </li>        
        </ul>
      </section>
      <footer>
        <img src="img/twitter-wrap.png" alt="Twitter Logo">
        <a href="http://facebook.com/trevorcleworth"><img src="img/facebook-wrap.png" alt"Facebook Logo"></a>
        <p>&copy; 2014 Trevor Cleworth</p>
      </footer>
    </div>    
  </body>
</html>

Cannot, for the life of me, get the header to center.

Vicente Peredo
Vicente Peredo
434 Points

You didn't add the id after the anchor, it should be like this:

    <a href="index.html" id="logo">

Hope it helps!

Wow that's it!! Thank you Vicente.