<p dir="auto">Sometimes when I select "Go to my next challenge" I get sent to a random challenge far ahead of where I should be, apparently at random. After "Waypoint: Use Clockwise Notation to Specify the Margin of an Element" I was sent to "Bonfire: Roman Numeral Converter" and after "Waypoint: Mobile Responsive Images" I was sent to "Zipline: Build a Random Quote Machine".</p>
<p dir="auto">Challenge <a href="http://beta.freecodecamp.com/en/challenges/basic-css/adjusting-the-padding-of-an-element" 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) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36</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: 20px;
}

.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;
"><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">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></pre></div>
<p dir="auto">The "phone screen" where the code is shown doesn't update until after the run test button is pressed. Has been this way since I began the CSS section of the beta. It makes it awkward when working on the cat photo app, but when it gets to showing the margins, it gives me the picture of the cat photo app instead of the yellow, red, and green boxes.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/11278237/22262333/604d3186-e225-11e6-8fe0-dd1478d99dc6.png"><img src="https://cloud.githubusercontent.com/assets/11278237/22262333/604d3186-e225-11e6-8fe0-dd1478d99dc6.png" alt="bug" style="max-width: 100%;"></a></p>