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

General Discussion

Posted by Brian Walsh
Brian Walsh
Courses Plus Student 9,153 Points

Build a Responsive Website: Creating Flexible Margins Challenge

Hello,

I am trying to complete the "Creating Flexible Margins Challenge" and I was hoping I could get some help. Here is my thought process trying to work through the problem:

** The entire problem for your reference**

<!DOCTYPE html>
<html>
  <head>
    <style>

      /* When setting flexible margin on an element, your context is the width of the element's container.
      When setting flexible padding on an element, your context is the width of the element itself. */

      p {
        margin: 0;
      }
      body {
        color: #fff;
      }
      .container {
        max-width: 800px;
      }

      .icing {
        background-color: #B4C34F;
        width: 100%; /*800px*/
        padding: 10px;
      }
      .cake {
        background-color: #f8748f;
        width: 80%; /*640px*/
        margin: 10px;
        padding: 10px;
      }
      .filling {
        background-color: #4FB69F;
        width: 75%; /*480px*/
        margin: 10px;
        padding: 10px;
       }
    </style>
  </head>
  <body>
    <div class="container" id="container">
    <div class="icing">
      <p>Icing</p>
      <div class="cake">
        <p>Cake</p>
        <div class="filling">
          <p>Filling</p>
        </div>
      </div>
    </div>
    </div>
  </body>
</html>

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

  Target / Context = Result

(marging .cake) / (.icing width) = Result 10px / 800px = 0.0125 (Conversion to percent) = 1%

However, after seeing that i miscalculated i attempted just to plug in each constant so I could reverse engineer what I did wrong and i also was wrong:

(marging .cake) / (.container max-width) = Result 10px / 800px = 0.0125 (Conversion to percent) = 1%

Unless I am working on the wrong part of the file i dont know what I am doing wrong.

Thank you!

-Brian

2 Answers

jeff creamer
jeff creamer
23,733 Points
jeff creamer
jeff creamer
23,733 Points

Hey Brian, There's no need to round your result down to 1%; stick with your original result and try that: 0.0125 X 100 = 1.25%. Computers, servers, etc. can handle long decimals; -plus, you want to keep your computations precise so they render just as you've planned. Hope that helps!

Brian Walsh
PLUS
Brian Walsh
Courses Plus Student 9,153 Points
Brian Walsh
Brian Walsh
Courses Plus Student 9,153 Points

Thank you very much, that worked!