Use Clockwise Notation to Specify the Margin of an Element Test Failing

HTML-CSS
1

Tell us what’s happening:
The test is not passing even though the code is correct.

Your code so far


<style>
  .injected-text {
    margin-bottom: -25px;
    text-align: center;
  }

  .box {
    border-style: solid;
    border-color: black;
    border-width: 5px;
    text-align: center;
  }

  .yellow-box {
    background-color: yellow;
    padding: 20px 40px 20px 40px;
  }
  
  .red-box {
    background-color: crimson;
    color: #fff;
    margin: 20px 40px 20px 40px;
  }

  .blue-box {
    background-color: blue;
    color: #fff;
    margin: 40px, 20px, 20px, 40px;
  }
</style>
<h5 class="injected-text">margin</h5>

<div class="box yellow-box">
  <h5 class="box red-box">padding</h5>
  <h5 class="box blue-box">padding</h5>
</div>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Safari/605.1.15.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element

2

I am using this version of Chrome:
Version 77.0.3865.90 (Official Build) (64-bit)

3

It looks like you added something extra to the blue box margin that you didn’t add to the other margins.
Look at the red box margin and compare it to the blue box

1 Like
6

Thank you so much.

I was adding commas when they are not required!

1 Like
7

Yep, this happens all the time, spelling mistakes are a big one too.