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 Alden Bonecutter
Alden Bonecutter
2,756 Points

Text align code not communicating properly.

Text align code, as well as the general css all seems correct from me checking. But text will not center on the preview. Here's my CSS so far:

/********************************* GENERAL **********************************/

wrapper {

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

a { text-decoration: none; }

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

logo {

text-align: center; margin: 0; }

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

/* site body */ body { background-color: #000; color: #999; }

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

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

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

/* links */ a { color: #6ab47b; }

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

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

Rich Bagley
Rich Bagley
25,869 Points

Hi Alden,

Would you be able to add 3 backticks (```) on the line before and after the code in the question please? It's just to make it a little clearer to read that's all and hopefully we can spot what's happening :)

It will then display something like this:

.class {
    color: #000;
}

This How-to Guide might help.

Thanks

-Rich

8 Answers

Paul Bentham
Paul Bentham
24,090 Points
Paul Bentham
Paul Bentham
24,090 Points

It may be because you have only put 0 in margin not 0px?

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Alden,

It does work, I think you may used id selectors (#id) instead of class selectors (.class). Check it out here: http://codepen.io/anon/pen/MYpjye

Check your HTML and make sure those two elements have id-s or classes, then use the right selectors in your CSS.

If you still got stuck, copy your HTML here and we'll help you out.

Alden Bonecutter
Alden Bonecutter
2,756 Points
Alden Bonecutter
Alden Bonecutter
2,756 Points

Ok so adding the px to the 0 didn't change it. Here's my html. But the 3 ```'s is not making my css appear like the html does. Probably making a silly mistake haha.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bonecutter | Photo</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Poiret+One|Bree+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> id="logo"> <h1>Alden Bonecutter</h1> <h2>Amateur Photographer</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>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>blahblahblah.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/highwaydoor"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/AldenBonecutter"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Alden Bonecutter.</p> </footer> </body> </html>

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Okay, so now I see that the issue is not in your CSS.

The main problem is that you wrote this (the id attribute is actually oustide of the a tag):

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

It would look like this in the right way:

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

Also, you forgot to close the div with the id wrapper before the closing body tag. You must be careful, because tiny things can cause errors like this.

Alden Bonecutter
Alden Bonecutter
2,756 Points
Alden Bonecutter
Alden Bonecutter
2,756 Points

Thank you! So i fixed the index.html error, but I'm so new that I'm a little confused about the second part. Is there something wrong with this section of code? Or do i need a </div> tag somewhere?

</ul> </nav> </header> <div id="wrapper"> <section> <ul>

Máté Végh
Máté Végh
25,607 Points

You just need to put a closing div tag between the closing footer and body tags at the bottom of your HTML. Like this:

...
<div id="wrapper">
  <footer>
  ...
  </footer>
</div>
</body>

Don't worry you'll quickly get into it!

Alden Bonecutter
Alden Bonecutter
2,756 Points
Alden Bonecutter
Alden Bonecutter
2,756 Points

Ok perfect! So that's all fixed and my code appears almost perfect but I guess I'm still missing something. The text still isn't centered on the preview. I suppose I'll repost my code how it looks now. Sorry I'm having so much trouble.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bonecutter | Photo</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Poiret+One|Bree+Serif' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html"> id="logo"> <h1>Alden Bonecutter</h1> <h2>Amateur Photographer</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>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>blahblahblah.</p> </a> </li> <li> <a href="img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>blahblahblah.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/highwaydoor"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://facebook.com/AldenBonecutter"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Alden Bonecutter.</p> </footer> </div> </body> </html>

Máté Végh
Máté Végh
25,607 Points

No prob! I just noticed that you have forgot the html, head and the opening body tags too. And also you didn't correct the id attribute for the wrapper div. Again, it should look like this:

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

I've corrected your code, hopefully it will be alright now:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bonecutter | Photo</title>
  <link href="css/normalize.css" rel="stylesheet">
  <link href='http://fonts.googleapis.com/css?family=Poiret+One|Bree+Serif'
  rel='stylesheet' type='text/css'>
  <link href="css/main.css" rel="stylesheet">
</head>
<body>
  <header>
    <a id="logo" href="index.html">
      <h1>Alden Bonecutter</h1>
      <h2>Amateur Photographer</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>blahblahblah.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-02.jpg">
            <img src="img/numbers-02.jpg" alt="">
            <p>blahblahblah.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-06.jpg">
            <img src="img/numbers-06.jpg" alt="">
            <p>blahblahblah.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-09.jpg">
            <img src="img/numbers-09.jpg" alt="">
            <p>blahblahblah.</p>
          </a>
        </li>
        <li>
          <a href="img/numbers-12.jpg">
            <img src="img/numbers-12.jpg" alt="">
            <p>blahblahblah.</p>
          </a>
        </li>
      </ul>
    </section>
    <footer>
      <a href="http://twitter.com/highwaydoor"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
      <a href="http://facebook.com/AldenBonecutter"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
      <p>&copy; 2015 Alden Bonecutter.</p>
    </footer>
  </div>
</body>
</html>
Alden Bonecutter
Alden Bonecutter
2,756 Points
Alden Bonecutter
Alden Bonecutter
2,756 Points

Wow man you're a hero. Thank you so much.

Máté Végh
Máté Végh
25,607 Points

Haha. No problem. Did it solve your issue?

Alden Bonecutter
Alden Bonecutter
2,756 Points
Alden Bonecutter
Alden Bonecutter
2,756 Points

Solved everything! Can't tell you how much I appreciate your help. Those little things can be so hard to find/solve when you aren't sure what you're looking for haha. Should be smooth sailing from here though :>