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
Kazira von miaow
355 PointsTake a mobile first approach- My logo isn't in the centre after I put in the #logo bit of code. Thank you for help
I have read the Q&As here Cleared the cache Always save & refresh the page to try and see changes so far nothing.
This is my html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Bizarre </title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<style>
footer a {
color: pink;
}
</a>
</style>
</head>
<body>
<header>
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">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 shapes using repetition</p>
</a>
</li>
</ul>
</section>
<footer>
<a href="https://twitter.com/mariposa4444"><img src="img/twitter.png" alt="Twitter Logo"></a>
<a href="https://www.facebook.com/monifa.alfayed"><img src="img/facebook.png" alt="Facebook Logo"</a>
</footer>
<a><p>© 2015 MiaowMail, a student of Nick Pettit.</p></a>
</div>
</body>
</html> ```
and my css
``` css a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0:
} ```
4 Answers
Konstantinos Pedarakis
21,301 PointsHello Kazira von miaow !! So, i'll jump right into your problem. First of all the logo that you want to center has the right code in the styling, but unfortunately you forgot to give the actual #logo (id) to your logo element in the HTML. For example you may set the logo as your header element like so...
<header id="logo">
<a href="index.html">
<h1>Nick Pettit</h1>
<h2>Designer</h2>
</a>
<nav>
<ul>
<li><a href="index.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
Now, the header, which includes the h1 element, the h2 element and the vanigation bar will be in the center.
Reffering ti you second comment about the title. The title tag must always be inside the head element of the page. Now, the contents of the head element is not display by the browser. Contents that are display by the browser are located only within the body tag. The title element is made to serve exactly the reason you mention, to set the title on the upper tab of the browser. in order to change Nick Pettit as Bizarre you have to change the h1 element inside the header tag.
This is what you may want.
I hope that helps.
Kazira von miaow
355 PointsAlso, I was playing around with the title and changed it from Nick Pettit to Bizarre, the title BIzarre shows up at the tab of the browser but not on the actual webpage. This is despite clearing the cache all the time, saving the code & refreshing the page. Thank you for your help!
Stanley Thijssen
22,831 PointsIts true when u change the title it only change the text displayed on the tabs. The title element is used for displaying the text in the browser tab.
To change the text in your document you should change the h1 tag this is your main heading tag which contains Nick Pettit too in your example.
Stanley Thijssen
22,831 PointsYour using an id of #logo in your css but this is not set in your html document. So the css you try to apply to #logo doesn't work because it doesn't exist.
Kazira von miaow
355 PointsThank you so much!