<p dir="auto">Challenge <a href="https://www.freecodecamp.com/en/challenges/html5-and-css/adjusting-the-padding-of-an-element#?solution=%3Cstyle%3E%0A%20%20.injected-text%20%7B%0A%20%20%20%20margin-bottom%3A%20-15px%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%7D%0A%0A%20%20.box%20%7B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-color%3A%20black%3B%0A%20%20%20%20border-width%3A%205px%3B%0A%20%20%20%20text-align%3A%20center%3B%0A%20%20%7D%0A%0A%20%20.yellow-box%20%7B%0A%20%20%20%20background-color%3A%20yellow%3B%0A%20%20%20%20padding%3A%2010px%3B%0A%20%20%7D%0A%20%20%0A%20%20.red-box%20%7B%0A%20%20%20%20background-color%3A%20red%3B%0A%20%20%20%20padding%3A%2030px%3B%0A%20%20%7D%0A%0A%20%20.green-box%20%7B%0A%20%20%20%20background-color%3A%20green%3B%0A%20%20%20%20padding%3A%2030px%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%3Ch5%20class%3D%22injected-text%22%3Emargin%3C%2Fh5%3E%0A%0A%3Cdiv%20class%3D%22box%20yellow-box%22%3E%0A%20%20%3Ch5%20class%3D%22box%20red-box%22%3Epadding%3C%2Fh5%3E%0A%20%20%3Ch5%20class%3D%22box%20green-box%22%3Epadding%3C%2Fh5%3E%0A%3C%2Fdiv%3E%0A" rel="nofollow">adjusting-the-padding-of-an-element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 10.0; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="

&lt;style&gt;
.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: 10px;
}

.red-box {
  background-color: red;
  padding: 10px;
}

.green-box {
  background-color: green;
  padding: 10px;
}
&lt;/style&gt;
&lt;h5 class=&quot;injected-text&quot;&gt;margin&lt;/h5&gt;

&lt;div class=&quot;box yellow-box&quot;&gt;
&lt;h5 class=&quot;box red-box&quot;&gt;padding&lt;/h5&gt;
&lt;h5 class=&quot;box green-box&quot;&gt;padding&lt;/h5&gt;
&lt;/div&gt;

    ```
  The challenge says &quot;Change the padding of your green box to match that of your red box.&quot;
Initially the padding of the red box is 20 px and the padding of the green box is 10 px.
So, we need to change the padding of the green box to 20 px to pass the challenge.

    But when we do so,the Run Tests is not successful. Below the challenge it says &quot;Your green-box class should give elements 20px of padding.&quot; . Even though I have changed the padding of green box class to 20px it is still passing it


![screenshot 24](https://cloud.githubusercontent.com/assets/13553103/18403367/c365bfba-76fd-11e6-9896-9025d4d5a491.png)


"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
.<span class="pl-c1">injected-text</span> {
  <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">-25<span class="pl-smi">px</span></span>;
  <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
}

.<span class="pl-c1">box</span> {
  <span class="pl-c1">border-style</span><span class="pl-kos">:</span> solid;
  <span class="pl-c1">border-color</span><span class="pl-kos">:</span> black;
  <span class="pl-c1">border-width</span><span class="pl-kos">:</span> <span class="pl-c1">5<span class="pl-smi">px</span></span>;
  <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
}

.<span class="pl-c1">yellow-box</span> {
  <span class="pl-c1">background-color</span><span class="pl-kos">:</span> yellow;
  <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;
}

.<span class="pl-c1">red-box</span> {
  <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;
  <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;
}

.<span class="pl-c1">green-box</span> {
  <span class="pl-c1">background-color</span><span class="pl-kos">:</span> green;
  <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">10<span class="pl-smi">px</span></span>;
}
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">injected-text</span>"<span class="pl-kos">&gt;</span>margin<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">box yellow-box</span>"<span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">box red-box</span>"<span class="pl-kos">&gt;</span>padding<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">box green-box</span>"<span class="pl-kos">&gt;</span>padding<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

    ```
  The challenge says "Change the padding of your green box to match that of your red box."
Initially the padding of the red box is 20 px and the padding of the green box is 10 px.
So, we need to change the padding of the green box to 20 px to pass the challenge.

    But when we do so,the Run Tests is not successful. Below the challenge it says "Your green-box class should give elements 20px of padding." . Even though I have changed the padding of green box class to 20px it is still passing it


![screenshot 24](https://cloud.githubusercontent.com/assets/13553103/18403367/c365bfba-76fd-11e6-9896-9025d4d5a491.png)

</pre></div>
<h4 dir="auto">Issue Description</h4>

<p dir="auto">I am working on this challenge (<a href="https://www.freecodecamp.com/en/challenges/html5-and-css/use-clockwise-notation-to-specify-the-padding-of-an-element" rel="nofollow">Use Clockwise Notation to Specify the Padding of an Element</a>) but I can't seem to get past it, is it my code?</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version: Mozilla/5.0</li>
<li>Operating System: Macintosh; Intel Mac OS X 10.11; rv:48.0</li>
</ul>
<h4 dir="auto">Your Code</h4>

<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=" &lt;style&gt;
  .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: red;
    padding: 20px 40px 20px 40px;
  }

  .green-box {
    background-color: green;
    padding: 40px 20px 20px 40px;
  }
&lt;/style&gt;
&lt;h5 class=&quot;injected-text&quot;&gt;margin&lt;/h5&gt;

&lt;div class=&quot;box yellow-box&quot;&gt;
  &lt;h5 class=&quot;box red-box&quot;&gt;padding&lt;/h5&gt;
  &lt;h5 class=&quot;box green-box&quot;&gt;padding&lt;/h5&gt;
&lt;/div&gt;


"><pre class="notranslate"> <span class="pl-kos">&lt;</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
  .<span class="pl-c1">injected-text</span> {
    <span class="pl-c1">margin-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">-25<span class="pl-smi">px</span></span>;
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
  }

  .<span class="pl-c1">box</span> {
    <span class="pl-c1">border-style</span><span class="pl-kos">:</span> solid;
    <span class="pl-c1">border-color</span><span class="pl-kos">:</span> black;
    <span class="pl-c1">border-width</span><span class="pl-kos">:</span> <span class="pl-c1">5<span class="pl-smi">px</span></span>;
    <span class="pl-c1">text-align</span><span class="pl-kos">:</span> center;
  }

  .<span class="pl-c1">yellow-box</span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> yellow;
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">40<span class="pl-smi">px</span></span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
  }

  .<span class="pl-c1">red-box</span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> red;
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">40<span class="pl-smi">px</span></span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
  }

  .<span class="pl-c1">green-box</span> {
    <span class="pl-c1">background-color</span><span class="pl-kos">:</span> green;
    <span class="pl-c1">padding</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">20<span class="pl-smi">px</span></span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
  }
<span class="pl-kos">&lt;/</span><span class="pl-ent">style</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">injected-text</span>"<span class="pl-kos">&gt;</span>margin<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span>="<span class="pl-s">box yellow-box</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">box red-box</span>"<span class="pl-kos">&gt;</span>padding<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">h5</span> <span class="pl-c1">class</span>="<span class="pl-s">box green-box</span>"<span class="pl-kos">&gt;</span>padding<span class="pl-kos">&lt;/</span><span class="pl-ent">h5</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">div</span><span class="pl-kos">&gt;</span>

</pre></div>
<h4 dir="auto">Screenshot</h4>