Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.


Creating Flexible margins challenge

The Creating Flexible margins challenge is driving me nuts on the calculations side this is the code
p { margin: 0; } body { color: #fff; } .container { max-width: 800px; }

  .icing {
    background-color: #B4C34F;
    width: 100%; /*800px*/
    padding: 10px;
  .cake {
    background-color: #f8748f;
    width: ; /*640px*/
    margin: 10px;
    padding: 10px;
  .filling {
    background-color: #4FB69F;
    width: 75%; /*480px*/
    margin: 10px;
    padding: 10px;

the challenge is using icing as your context set the width to em.

The equation is target / context = answer . So if you divide the target 640px by context 800px you get 0.8 and move the decimal over to make a margin of 80%..that doesn't work.

The next challenge then puts the target at 480px and the context at 640px...

I can't seem to get a right answer here.


3 Answers

If you have a chance can you link the challenge you are working on?

This threw me for a second too. Reread the question. You have the right concept you are just applying it to the wrong thing :)

Using .icing as your context, convert the margins on .cake from pixels to percentages.

I tried it but am still getting the wrong answer. wouldnt't it be 10/640 = 1.56%

if you look at .cake you have a (target) margin of 10px.

Your context is .icing which has a width of 800px. So if you divide 10/800 you get 0.0125 and when you move the decimal point you get.....


ps. with 640px you would be using .cake as your context. Your context is the container that your div sits in, in this case .icing

Figured it out. I forgot to tell you I had finished the first task and was referencing the next task! Sorry! Thank you for your help!