<p dir="auto">Challenge <a href="https://www.freecodecamp.com/challenges/increment-a-number-with-javascript#?solution=var%20myVar%20%3D%2087%3B%0A%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0AmyVar%2B%2B%3B%0A%0A" rel="nofollow">Increment a Number with JavaScript</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">Link to page:</p>
<p dir="auto"><a href="https://www.freecodecamp.com/challenges/increment-a-number-with-javascript#?solution=var%20myVar%20%3D%2087%3B%0A%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0AmyVar%2B%2B%3B%0A%0A" rel="nofollow">https://www.freecodecamp.com/challenges/increment-a-number-with-javascript#?solution=var%20myVar%20%3D%2087%3B%0A%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0AmyVar%2B%2B%3B%0A%0A</a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/10551051/14186192/1e993282-f74b-11e5-9a97-7c079d92125f.jpg"><img src="https://cloud.githubusercontent.com/assets/10551051/14186192/1e993282-f74b-11e5-9a97-7c079d92125f.jpg" alt="javascript i f_ - https___www freecodecamp com_chall" style="max-width: 100%;"></a></p>
<p dir="auto">Challenge <a href="https://www.freecodecamp.com/challenges/adjusting-the-padding-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%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%2020px%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%2020px%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 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.87 Safari/537.36</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: 20px;
  }

  .green-box {
    background-color: green;
    padding: 20px;
  }
&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</span><span class="pl-kos">:</span> <span class="pl-c1">20<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">20<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">Edit by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/raisedadead/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/raisedadead">@raisedadead</a>:</p>
<h4 dir="auto">Camper is unable to advance between challenges due to slow/poor connectivity.</h4>