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

HTML How to Make a Website Styling Web Pages and Navigation Make a CSS Image Gallery

Posted by Armando Toossi
Armando Toossi
968 Points

Margin 2.5% Error Cant Figure it out!!

I am trying to move past the Add Margin of 2.5% however I am getting an error message every time.

Not sure what I did wrong but its driving me nuts thats for sure!

13 Answers

Greg Dyer
Greg Dyer
1,205 Points

Same issue here... code is correct and I can validate it in W3C -

gallery li {

float: left; width: 45%; margin: 2.5% ; background-color: #f5f5f5; color: #bdc3c7; }

Kyle Meyer
Kyle Meyer
5,459 Points
Kyle Meyer
Kyle Meyer
5,459 Points

We upgraded some of our infrastructure just a bit ago and accidentally it broke a couple of our challenges. We're fixing it up right now. Y'all can blame me, if you want :cry:

:zap:

Greg Dyer
Greg Dyer
1,205 Points

Cool - Thanks Kyle!

Kyle Meyer
Kyle Meyer
5,459 Points
Kyle Meyer
Kyle Meyer
5,459 Points

This is fixed as of last night. Thanks for being a student y'all! :zap:

Aaron HARPT
Aaron HARPT
19,845 Points
Aaron HARPT
Aaron HARPT
19,845 Points

This is the code that needs to be added to the #gallery li rule:

margin: 2.5%; color: black; background: white;

Jordan Ray
Jordan Ray
1,187 Points
Jordan Ray
Jordan Ray
1,187 Points

Did you get it working? For some reason mine won't work either...

Armando Toossi
Armando Toossi
968 Points
Armando Toossi
Armando Toossi
968 Points

Nope its still not working for me even when I copy and paste his code which shouldn't be necessary as the previous exercise during the video does't require the rule command.

Could this actually be a bug in the website?

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 0; padding: 0 0; list-style: none; }

gallery li {

float: left; width: 45%; }

gallery li rule {

margin: 2.5%; }

Abdul Zainos
Abdul Zainos
4,938 Points

Not sure why you have the word rule in here. You want to structure your code as simply as possible

#gallery { /*You want to target just your gallery here.*/
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li { /*Then you will want to target your gallery's LIST items here.*/
  float: left;
  width: 45%;
  margin: 2.5%;
  color: red;
  background-color: red;
}
Armando Toossi
Armando Toossi
968 Points
Armando Toossi
Armando Toossi
968 Points

Hey Abdul,

I tried logging in and out and copy pasting your code and it still is not working.

Abdul Zainos
Abdul Zainos
4,938 Points

I'm sorry Armando, I don't have any other advice on what to check. I would go ahead and submit your ticket. While you wait go ahead and review the video. I've been stuck like you before and it's been in the exact same place. Like you I was 100% certain my code was correct. Then it turned out to be something obvious. Good luck!

Armando Toossi
Armando Toossi
968 Points
Armando Toossi
Armando Toossi
968 Points

oh thats weird... that rule part is tricky its not in the training yet.

Jordan Ray
Jordan Ray
1,187 Points
Jordan Ray
Jordan Ray
1,187 Points

I imagine this is a bug in the website - just skip the exercise and come back to it when it's fixed I suppose.

Armando Toossi
Armando Toossi
968 Points
Armando Toossi
Armando Toossi
968 Points

Is it even possible to skip?

Will they see our posts and correct or do we need a ticket?

Abdul Zainos
Abdul Zainos
4,938 Points
Abdul Zainos
Abdul Zainos
4,938 Points

Remember your ID's require #'s when calling calling out styling for a specific element. 

img {
 max-width: 100%; 
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  color: red;
  background-color: red;
}
Armando Toossi
Armando Toossi
968 Points
Armando Toossi
Armando Toossi
968 Points

Yeah the # was already included in mine but it still won't work. It seems a few people are having this problem and I know 100% my code is correct.

Abdul Zainos
Abdul Zainos
4,938 Points

I just did it and it worked fine, can you share the code you are trying to submit? Check the Markdown Cheatsheet to format the code correctly. So I can help you out.

Jordan Ray
Jordan Ray
1,187 Points
Jordan Ray
Jordan Ray
1,187 Points

This is my code - this does not work but i'm fairly sure it's correct?

See if I can format this correctly:

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: black;
  color: white;
}
Abdul Zainos
Abdul Zainos
4,938 Points

That's right you got it! :)

Jordan Ray
Jordan Ray
1,187 Points
Jordan Ray
Jordan Ray
1,187 Points

It doesn't pass- it says I have not set the margin to 2.5% ...

I'm pretty sure it's a website bug.

Abdul Zainos
Abdul Zainos
4,938 Points

Hmm... there must be something else. If it were site wide, I wouldn't be able to pass it. Make sure you don't have any extra spaces, characters, or missing syntax. You may want to log out and log back in. Then try pasting the code I wrote above. That passed me through all the challenges.

Then if that doesn't, work you may need to open a ticket.