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

Digital Literacy

Sarah McHarg
Sarah McHarg
3,610 Points

Having 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?

Steven Parker
Steven Parker
231,275 Points

Please show your code, and provide a link to the challenge to make it possible to check it for you.

Sarah McHarg
Sarah McHarg
3,610 Points

How do I do this?

https://teamtreehouse.com/library/treehouse-club-javascript/car-sounds/background-color-margin-and-padding-2

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
Steven Parker
231,275 Points

Yes, 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. :arrow_heading_down: ย  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
Steven Parker
231,275 Points

It looks like you have a stray extra closing brace ("}") between the padding setting and the width.

Sarah McHarg
Sarah McHarg
3,610 Points

I 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
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Sarah 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! :sparkles:

Sarah McHarg
Sarah McHarg
3,610 Points

Hey 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.

Hey 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
Steven Parker
231,275 Points

Katelyn Peters , you have the same issue Sarah had, a stray extra closing brace ("}") between the padding setting and the width.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi 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! :sparkles:

Sarah McHarg
Sarah McHarg
3,610 Points

This 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Yes, 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
Sarah McHarg
3,610 Points

Oh 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
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

First, 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. :sparkles: