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
LUIS A HERNANDEZ PIÑA M
2,223 PointsMy 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; }
5 Answers
Antonio Jaramillo
15,604 PointsBy 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.
Antonio Jaramillo
15,604 PointsAlso, make sure to get rid of the extra colons (:) you've typed.
Antonio Jaramillo
15,604 PointsYeah, 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! : )
Antonio Jaramillo
15,604 PointsOkay, 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
2,223 PointsOh 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
2,223 PointsThanks 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>© 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;
}
Christopher Sea
3,726 PointsThe 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; }
Marco Boretto
29,821 PointsMarco Boretto
29,821 PointsHi 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