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 trialSarah McHarg
3,610 PointsHaving problems with code challenge task 3 of 3 background colour, margain and padding.
I have followed the correctional instructions many many times and its still showing up as an error. What am I doing wrong?
Sarah McHarg
3,610 PointsHow do I do this?
The question was:
Edit the CSS stylesheet to change links to have a padding of 10px.
/* Links */ a { background: transparent; border: 0; display: block; float: left; margin: 0; outline: 0; padding: 10px; } width: 33%; }
It's response was:
Bummer! In the CSS rule for 'a' elements (links), you need to set the 'padding' property to '10px', like this: padding: 10px; }
Steven Parker
231,269 PointsYes, and also please show the code you entered that was causing the error.
Use the instructions for code formatting in the Markdown Cheatsheet pop-up below the "Add an Answer" area. ย Or watch this video on code formatting.
Also for future issues, if you begin a question using the "Get Help" button, the system will format and paste your code in and provide a link button.
5 Answers
Steven Parker
231,269 PointsIt looks like you have a stray extra closing brace ("}") between the padding setting and the width.
Sarah McHarg
3,610 PointsI have removed the extra closing bracket and it still hasn't worked. Is there anything else I am missing?
/* Links */ยด
a {
background: transparent;
border: 0;
display: block;
float: left;
margin: 0;
outline: 0;
padding: 10px;
width: 33%;
}
Moderator edited: Markdown added so that code renders properly in the forums.
Jennifer Nordell
Treehouse TeacherSarah McHarg I took the liberty of adding some markdown to your code so that it is easier for us to read. As your code is, right now, it should pass the 3rd step. But this comes with a big if... if none of the other selectors have been affected. The fact that you had a stray curly brace may indicate that it was meant to be with another selector and something may have happened during a copy/paste. Go through each one of your selectors and make sure each one has one open curly brace and one closed curly brace just like this one does. Mismatching curly braces will cause errors that will result in the rules that you write not being applied.
If you need us to review your code, you should post the entire code here instead of just the last set of rules.
Hope this helps!
Sarah McHarg
3,610 PointsHey Jennifer, thanks for the help. I am new to this, so just bare with me. I will copy and paste the entire exercise:
/* Background Color */ html { background: #99E6FF; }
/* Body */ body { margin: 0 auto; max-width: 800px; }
/* Images */ img { width: 100%; }
.car { display:block; margin: 40px auto } 0 50px 0; padding: 0; }
/* Links */ a { background: transparent; border: 0; display: block; float: left; margin: 0; outline: 0; padding: 10px; } width: 33%; }
Bummer! In the CSS rule for 'a' elements (links), you need to set the 'padding' property to '10px', like this: padding: 10px; }
I follow this Bummer instruction and its still not accepting it. Why is this?
Also, when I save the comment here, the layout changes. I wish I could send screenshots on this.
Katelyn Peters
1,681 PointsHey Jennifer Nordell, you seem like you know a lot about this can you help me out what did i do wrong it is still saying that bummer instructions.
Edit the CSS stylesheet to change links to have a padding of 10px.
Bummer: In the CSS rule for 'a' elements (links), you need to set the 'padding' property to '10px', like this: padding: 10px; } css/style.css index.html /* Background Color / html { background: #99E6FF; } โ โ / Body / body { margin: 0 auto; max-width: 800px; } โ โ / Images / img { width: 100%; } โ .car { display:block; margin: 40px auto;} padding: 10px } โ โ / Links */ a { background: transparent; border: 0; display: block; float: left; margin: 0; outline: 0; padding: 10px; } width: 33%; } โ
Steven Parker
231,269 PointsKatelyn Peters , you have the same issue Sarah had, a stray extra closing brace ("}") between the padding setting and the width.
Jennifer Nordell
Treehouse TeacherHi there! As I stated before, the problem is likely with a rule before the a
selector and indeed that's the case.
The rules inside the .car
selector are invalid (contain errors) which means that it can't even see your a
rules.
In step 2, you were supposed to change the margin to 40px auto
, which you did... sort of. It counts it as correct because that rule ends with the closing curly brace you have in the middle of the line. However, everything after that is completely ignored as it generates errors.
Your .car
rule is the problem here.
You wrote:
.car {
display:block;
margin: 40px auto } 0 50px 0; /* note the closing curly brace in the middle of the line */
padding: 0;
}
But that should be:
.car {
display:block;
margin: 40px auto;
padding: 0;
}
Fixing your .car
selector should cause the rest to be readable and pass the challenge.
Hope this helps!
Sarah McHarg
3,610 PointsThis is what I have done now and its still giving me the same Bummer instruction:
/* Background Color */
html {
background: #99E6FF;
}
/* Body */
body {
margin: 0 auto;
max-width: 800px;
}
/* Images */
img {
width: 100%;
}
.car {
display:block;
margin: 40px auto }
padding: 0;
}
/* Links */
a {
background: transparent;
border: 0;
display: block;
float: left;
margin: 0;
outline: 0;
padding: 10px;
width: 33%;
}
Moderator edited: Markdown added so that code renders properly in the forums.
Jennifer Nordell
Treehouse TeacherYes, your .car
rule is still incorrect. Your car rule should look exactly like this:
.car {
display:block;
margin: 40px auto;
padding: 0;
}
Again, each selector should have exactly one open curly brace and exactly one closing curly brace. Your .car
selector has one open curly brace and two closed curly braces.
Sarah McHarg
3,610 PointsOh My Gawd! I am so sorry! You see, I wasn't understanding it because it had actually accepted these errors before but then wouldn't accept part 3. Hard to explain what I mean here. Thank you! I have passed my digital literacy! :-D
Jennifer Nordell
Treehouse TeacherFirst, and foremost, no need to apologize. We all miss stuff. We all make mistakes. We are all in a constant state of learning.
RIght, as I tried to explain before, and it might make more sense later.... that stray closing curly brace completely ends that rule. Which means that afterwards it's trying to interpret this as a rule:
padding: 0;
}
And it has no idea what that belongs to, so an error occurs at that point meaning that everything else will be completely ignored. To be clear, this is how CSS works. This is not an error specific to Treehouse. So earlier when you had this:
.car {
display:block;
margin: 40px auto } 0 50px 0; /* note the closing curly brace in the middle of the line */
padding: 0;
}
.. it passed because .car
had a margin of 40px auto because the rule was ended immediately after which means that the error didn't occur until * afterward*. So for the purposes of Step 2, it did meet the requirements.
After that, it tried to interpret:
0 50px 0;
padding 0;
}
as a rule, which it couldn't do. This is why it's so important to go back through your selectors and ensure that every one has one open curly brace and one closing curly brace. In fact, to make sure this is the case, I go so far as to type my rules like this:
.my-rule {}
Then I add space between the curly braces:
.my-rule {
}
Only after I've done this do I begin actually typing my rules inside. This helps prevent exactly this scenario.
Hang in there! You're doing great. We've all fallen victim to non-matching curly braces, brackets, parentheses etc.
Steven Parker
231,269 PointsSteven Parker
231,269 PointsPlease show your code, and provide a link to the challenge to make it possible to check it for you.