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 Customizing Colors and Fonts Resize Text

LUIS A HERNANDEZ PIÑA M
LUIS A HERNANDEZ PIÑA M
2,223 Points

My logo and nav won't align and both are set to text-align: center;

body { font-family: 'Roboto', sans-serif; }

a { text-decoration: none; }

wrapper {

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

}

/************************************* Navigation *************************************/

nav { text-align: center; padding: 10px 0; margin: 20px 0 0; }

/************************************* Footer *************************************/

footer { font-size:: 0.75em; text-align: center; padding-top: 50px; color: #ccc; }

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

}

h2 { font-size: 1.25em; margin: -5px 0 0; font-weight: normal; }

logo {

text-align: center; margin: 0;

}

a { color: #6ab47b; }

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

h1, h2 { color: #fff; }

nav { background: #599a68 }

nav a, nav a:visited { color: #fff; }

nav a.selected, nav a:hover { color: #32673f; } /site body/ body { background-color: #fff; color: #999; }

Marco Boretto
Marco Boretto
29,821 Points

Hi Luis could be for tons of reasons: written this way it seems you need to put an # before the selector logo and wrapper (just in case they are id element) then, if not working, try to post you index.html file or share your workspace here, I'll try to help you better ciao

5 Answers

By default, a ul or ol element will have some padding-left to create an indent for your list items. If you set nav ul {padding: 0;}, your list should line up fine. The instructor does not inform you of this because he aligns the list items differently in a later lesson.

Also, make sure to get rid of the extra colons (:) you've typed.

Yeah, the reason that the files from the lesson have the same alignment problem is because the instructor has a different idea for aligning the list, in a later lesson. You're actually just ahead of the game, so you can at least feel good about that! : )

Okay, right under your rule that sets your nav element's text alignment to center, try creating a rule that sets "nav ul" to "padding-left: 0;"

LUIS A HERNANDEZ PIÑA M
LUIS A HERNANDEZ PIÑA M
2,223 Points

Oh ok thanks, it did work :). I actually downloaded the project files from treehouse and they had the same problem.

LUIS A HERNANDEZ PIÑA M
LUIS A HERNANDEZ PIÑA M
2,223 Points

Thanks for the reply, but it is still not working, here I will share both of my files:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Luis | Dr</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,700italic,900italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body> 
    <header> 
      <a href="index.html" id="logo">
      <h1>Luis</h1>
      <h2>Dr</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 80s 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 shpaes using repetition.</p>
            </a>  
            </li>
          </ul>
          <p>Gallery will go here.</p>
        </section>
      <footer>
        <a href="http://twitter.com/AppleseedLahpm4"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://facebook.com/lahpm"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2014 Luis Hernandez</p>
      </footer>
    </div>
  </body>
</html>
body {
  font-family: 'Roboto', sans-serif;
}

a {
  text-decoration: none;
}

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

}

/*************************************
Navigation
*************************************/


nav {
  text-align: center; 
  padding: 15px 0; 
  margin: 20px 0 0;
}

/*************************************
Footer
*************************************/

footer {
  font-size:: 0.75em;
  text-align: center; 
  padding-top: 50px;
  color: #ccc; 
}


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

}

h2 {
  font-size: 1.25em; 
  margin: -5px 0 0; 
  font-weight: normal; 
}

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

}

a {
  color: #6ab47b;
}

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

h1, h2 {
  color: #fff;
}

nav {
  background: #599a68
}

nav a, nav a:visited {
  color: #fff;
}

nav a.selected, nav a:hover {
  color: #32673f;
}
/*site body*/
body {
  background-color: #fff;
  color: #999;
}

The only thing I've seen that should be changed is this:

nav { background: #599a68 }

I'm not sure if this would cause the problem you're having, but maybe try this instead:

nav { background: #599a68; }