<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-add-different-padding-to-each-side-of-an-element?solution=%3Cstyle%3E%0A%20%20.injected-text%20%7B%0A%20%20%20%20margin-bottom%3A%20-25px%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%3A10px%3B%0A%20%20%7D%0A%20%20%0A%20%20.red-box%20%7B%0A%20%20%20%20background-color%3Ared%3B%0A%20%20%20%20padding-top%3A%2040px%3B%0A%20%20%20%20padding-right%3A%2020px%3B%0A%20%20%20%20padding-bottom%3A%2020px%3B%0A%20%20%20%20padding-left%3A%2040px%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-top%3A%2040px%3B%0A%20%20%20%20padding-right%3A%2020px%3B%0A%20%20%20%20padding-bottom%3A%2020px%3B%0A%20%20%20%20padding-left%3A%2040px%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">Waypoint: Add Different Padding to Each Side of an Element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:37.0) Gecko/20100101 Firefox/37.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">My code:</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-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

  .green-box {
    background-color: green;
    padding-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 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">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-top</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-right</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-left</span><span class="pl-kos">:</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-top</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-right</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-left</span><span class="pl-kos">:</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>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-add-different-padding-to-each-side-of-an-element?solution=%3Cstyle%3E%0A%20%20.injected-text%20%7B%0A%20%20%20%20margin-bottom%3A%20-25px%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%3A10px%3B%0A%20%20%7D%0A%20%20%0A%20%20.red-box%20%7B%0A%20%20%20%20background-color%3Ared%3B%0A%20%20%20%20padding-top%3A%2040px%3B%0A%20%20%20%20padding-right%3A%2020px%3B%0A%20%20%20%20padding-bottom%3A%2020px%3B%0A%20%20%20%20padding-left%3A%2040px%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-left%3A%2040px%3B%0A%20%20%20%20padding-top%3A%2040px%3B%0A%20%20%20%20padding-right%3A20px%3B%0A%20%20%20%20padding-bottom%3A20px%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">Waypoint: Add Different Padding to Each Side of an Element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 6.1; WOW64; rv:42.0) Gecko/20100101 Firefox/42.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">My code:</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-top: 40px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 40px;
  }

  .green-box {
    background-color: green;
    padding-top: 40px;
    padding-right:20px;
    padding-bottom:20px;
    padding-left: 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">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-top</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-right</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-bottom</span><span class="pl-kos">:</span> <span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-left</span><span class="pl-kos">:</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-top</span><span class="pl-kos">:</span> <span class="pl-c1">40<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-right</span><span class="pl-kos">:</span><span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-bottom</span><span class="pl-kos">:</span><span class="pl-c1">20<span class="pl-smi">px</span></span>;
    <span class="pl-c1">padding-left</span><span class="pl-kos">:</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>