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 trialAlex perez
1,667 PointsNeed to give a max-width of 150px
On the exercise it is saying that i need to add a max-width of 150 px and i am putting that but it is coming out wrong i dont know if there is a bug on the exercise or if i am formatting it wrong.
<!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">Portfolio</a></li>
<li><a href="about.html" class="selected">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section>
<img src="img/gratt.png" alt="picture" class="profile-photo">
<p>I like baseball and I love to code</p>
</section>
<footer>
<a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Nick Pettit.</p>
</footer>
</div>
</body>
</html>
img{
max-width: 100%;
display: block;
margin:center;
margin: 30px;
max-width: 150px;
border-radius: 100%;
}
a {
text-decoration: none;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
Steven Parker
231,198 PointsLukasz Sadorski — The spacing isn't important in CSS.
But you're right about the margin .. it looks like the challenge didn't check that one thoroughly! You might want to submit a bug report about it to Support.
1 Answer
Steven Parker
231,198 PointsAlways add new CSS to the end of the file.
Because of the "cascade" of CSS, when rules have equal specificity whichever one occurs last will take precedence.
In this case, since there is already a rule in the file that targets the same element later in the file, any setting for max-width
placed at the top of the file will be ignored.
Lukasz Sadorski
5,999 PointsLukasz Sadorski
5,999 PointsDont forget about spacing after your "img{" & "margin:" & margin has to be set as "auto" instead of center.