A possible issue with 'Building a Nutrition Label' Step 11

Step 11Passed

If you inspect your .label element with your browser’s developer tools, you may notice that it’s actually 288 pixels wide instead of 270. This is because, by default, the browser includes the border and padding when determining an element’s size.

To solve this, reset the box model by creating a * selector and giving it a box-sizing property of border-box.

Before changing any part of the code, I used DevTools to inspect the ‘.label’ element and found it to be 270px already, and not 288px as is suggested should be expected:

I did then add:

  • (
    box-sizing: border-box;
    And then check the DevTools again to find ‘.label’ having still a width of 270px;
    I am wondering, have a made some mistake here, or am I missing something?

Welcome to our community! Please use the Help? which appears after three unsuccessful attempts on a step? By using this way to submit codes and questions, it allows people in the community to assist quickly and accurately to your concerns.

Thank you.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.