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

Select the element with the ID logo and center the text using text-align?

Regarding the "How to Make a Website" course by Nick Pennent, on the CSS: Cascading Style Sheets, step #6 - "Style the Basic Elements" quiz, I am on the task-

"Select the element with the ID logo and center the text using text-align."

Can anyone tell me how to do this? I am fully caught up with the course material so far.

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

#wrapper {
  max-width:940px;
  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

Simon Duchaine
Simon Duchaine
14,441 Points

Hi Clayton!

The quiz is asking you to align the logo in the center of the page. "Selecting" the logo ID means that on the CSS sheet you create a new CSS rules with #logo and text-align: center.

I'm letting you do the rest!

Kristopher Van Sant
PLUS
Kristopher Van Sant
Courses Plus Student 18,830 Points

Hey there, you're not far off from figuring out the answer! You already know how to select an element with an ID, because you did so in the challenge task number 2. Just now instead of selecting the ID wrapper you are selecting the ID logo. The next step is then to center the text. If you review the Take a Mobile-First Approach video you can find the answer at 2:24.

Awesome, thanks alot Simon, I managed to figure it out, was unsure of the basic syntax.

Kristopher, thank you too, that's really helpful.