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 trialjames kamoni
Front End Web Development Techdegree Student 471 PointsHow do you select the element with the ID logo and center the text using text-align
i have tried severally just gives me ''Bummer!''
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: centre;
margin: 0 auto;
}
<!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>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
3 Answers
Jake Salo
13,175 PointsYou're on the right track James, but you need to watch your spelling - It should be - 'text-align: center;'
not 'text-align: centre;'
Try this :)
#logo {
text-align: center;
}
Heather Hilder
16,343 PointsHi James Your almost there though it only asked you to center the text using text-align so the margin part isn't needed
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: auto;
}
#logo {
text-align: center;
}
so unfortunately the challenge sees it as being a wrong answer just remove the margin bit and it should work ok.
Jake Salo
13,175 PointsThe margin would not fail the question for him. It was the misspelling of 'center' which caused it.
james kamoni
Front End Web Development Techdegree Student 471 Pointsthanks you were right spelling mistake.
Heather Hilder
16,343 PointsYes that's true but the challenge's also return "bummer!" too if you don't follow the steps exactly, so adding more code than it asks isn't correct either.
Jake Salo
13,175 PointsI know its not what its asking for, but its not the problem here..