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

HTML How to Make a Website CSS: Cascading Style Sheets Style the Basic Elements

Posted by james kamoni
.a{fill-rule:evenodd;}techdegree
james kamoni
Front End Web Development Techdegree Student 471 Points

How do you select the element with the ID logo and center the text using text-align

i have tried severally just gives me ''Bummer!''

css/main.css 
a {
 text-decoration: none; 

}

#wrapper {
     max-width: 940px;
     margin: 0 auto;
}
#logo {
     text-align: centre;
     margin: 0 auto;
}
index.html 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | 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>Nick Pettit</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">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>Playing with blending modes in Photoshop.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>Trying to create an 80's style of glows.</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.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>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Nick Pettit.</p>
      </footer>
    </div>
  </body>
</html>

3 Answers

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

You're on the right track James, but you need to watch your spelling - It should be - 'text-align: center;' not 'text-align: centre;' Try this :)

#logo {
  text-align: center;
}
Heather Hilder
Heather Hilder
16,343 Points
Heather Hilder
Heather Hilder
16,343 Points

Hi James Your almost there though it only asked you to center the text using text-align so the margin part isn't needed 

a {
 text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: auto;
}

#logo {
  text-align: center;
}

so unfortunately the challenge sees it as being a wrong answer just remove the margin bit and it should work ok.

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

The margin would not fail the question for him. It was the misspelling of 'center' which caused it.

james kamoni
.a{fill-rule:evenodd;}techdegree
james kamoni
Front End Web Development Techdegree Student 471 Points

thanks you were right spelling mistake.

Heather Hilder
Heather Hilder
16,343 Points
Heather Hilder
Heather Hilder
16,343 Points

Yes that's true but the challenge's also return "bummer!" too if you don't follow the steps exactly, so adding more code than it asks isn't correct either.

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

http://prntscr.com/fk2u5t

I know its not what its asking for, but its not the problem here..