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 Organize CSS with Comments

Adam Jones
Adam Jones
3,196 Points
Posted by Adam Jones
Adam Jones
3,196 Points

<a> attribute left aligned despite text-align being set to centre

Hi guys,

Really stumped by this, I have a a tag in header tag as per Nick's code, yet despite our main.css being identical line for line his is centre aligned and mine is left aligned.

My index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Adam Jones | Learning to build a site</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>Adam Jones</h1>
        <h2>Learning to build a site</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="examples.html">Code Examples</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>text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-02.jpg">
              <img src="img/numbers-02.jpg" alt="">
              <p>text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-06.jpg">
              <img src="img/numbers-06.jpg" alt="">
              <p>text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-09.jpg">
              <img src="img/numbers-09.jpg" alt="">
              <p>text</p>
            </a>
          </li>
          <li>
            <a href="img/numbers-12.jpg">
              <img src="img/numbers-12.jpg" alt="">
              <p>text</p>
            </a>
          </li>
        </ul>
      </section>

      <footer>
        <a href="http://twitter.com/abc"><img src="img/twitter-wrap.png" alt="Twitter"></a>
        <a href="https://facebook.com/abc"><img src="img/facebook-wrap.png" alt="Facebook"></a>

        <p>&copy; 2014 Adam Jones.</p>
      </footer>
    </div>
  </body>

</html>

My css, which comments aside is identical to Nick's

/*****************************/
General
/*****************************/

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

a {
  text-decoration: none;
}

/*****************************/
Heading
/*****************************/

/*
  This is where the issue is
*/
#logo {
  text-align: center;
  margin: 0;
}

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


/*****************************/
Colours
/*****************************/
body {
  background-color: #fff;
  color: #999;
}

header {
  background: #6ab47b;
  border-color: #599a68;
}
/*
  Nav background for mobile
*/
nav {
  background: #599a68;
}
h1,h2 {
  color: #fff;
}
a {
  /*text-decoration:none;*/
  color: #6ab47b;
}

nav a, nav a:visited {
  color: #fff;
}
nav a.selected {
  color: #32673f;
}

Nick's css

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

#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-serif;
  margin: 15px 0;
  font-size: 1.75em;
}



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

/* site body */
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;
}

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

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

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

I really can't work out why there should be any difference in result, but y h1 and h2 tags in the a with the id logo remain studdornly left aligned

      <a href="index.html" id="logo">
        <h1>Adam Jones</h1>
        <h2>Learning to build a site</h2>
      </a>

Any help much appreciated.

2 Answers

Nicholas Mejia
Nicholas Mejia
23,800 Points
Nicholas Mejia
Nicholas Mejia
23,800 Points

Call me crazy, but it looks like your CSS selectors don't specify that it's looking for an id. Add the hashtag(#) sympol to the beginning of your selector so it read #logo. You should do this for the rest of your code as well if it's missing from other things.

Adam Jones
Adam Jones
3,196 Points
Adam Jones
Adam Jones
3,196 Points

Sorry, that's just a result of me not using the markdown properly, I've fixed it now, hopefully.

I'm using the # id selector in the same way Nick is, so I'm puzzled as to why it's not applying the styling. The only thing I could think of is that the a is nested in a header and that might be overriding the css in #logo, however, Nick's html and css are the same and that isn't happening for him.

Nick's html for referrence.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Nick Pettit | Designer</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>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>