<p dir="auto">Challenge <a href="https://www.freecodecamp.com/challenges/use-a-css-class-to-style-an-element#?solution=%0A%3Cstyle%3E%0A%20%C2%A0.red-text%20%7B%0A%20%20%20%20color%3A%20red%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp%3EKitty%20ipsum%20dolor%20sit%20amet%2C%20shed%20everywhere%20shed%20everywhere%20stretching%20attack%20your%20ankles%20chase%20the%20red%20dot%2C%20hairball%20run%20catnip%20eat%20the%20grass%20sniff.%3C%2Fp%3E%0A" rel="nofollow">Use a CSS Class to Style an Element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Linux; Android 5.1.1; SM-T670 Build/LMY47X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.89 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;
  .red-text {
    color: red;
  }
&lt;/style&gt;

&lt;h2 class=&quot;red-text&quot;&gt;CatPhotoApp&lt;/h2&gt;

&lt;p&gt;Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.&lt;/p&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">red-text</span> {
    <span class="pl-c1">color</span><span class="pl-kos">:</span> red;
  }
<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">h2</span> <span class="pl-c1">class</span>="<span class="pl-s">red-text</span>"<span class="pl-kos">&gt;</span>CatPhotoApp<span class="pl-kos">&lt;/</span><span class="pl-ent">h2</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">I have made all required changes, but it still says the h2 element isn't red. I have tried entering the changes in a different order, and have tried clearing browser history and cache. Nothing seems to fix the issue.</p>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-target-a-specific-child-of-an-element-using-jquery" rel="nofollow">http://www.freecodecamp.com/challenges/waypoint-target-a-specific-child-of-an-element-using-jquery</a> has an issue. Please describe how to reproduce it, and include links to screenshots if possible.</p>
<p dir="auto">CODE:<br>
$(".well:nth-child(2)").addClass("animated bounce");</p>
<p dir="auto">No nth-child works (have tried 0, 1, 2, 3). 2 visibly works, but "The second element in each of your well elements should bounce.</p>
<p dir="auto">Visibly working (but not 'marked as correct'):</p>
&lt;script&gt;
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "green");
    $(".well:nth-child(2)").addClass("animated bounce");
  });
&lt;/script&gt;

<div dir="auto">
  <h3 dir="auto">jQuery Playground</h3>
  <div dir="auto">
    <div dir="auto">
      <h4 dir="auto">#left-well</h4>
      <div id="user-content-left-well" dir="auto">
        #target1
        #target2
        #target3
      </div>
    </div>
    <div dir="auto">
      <h4 dir="auto">#right-well</h4>
      <div id="user-content-right-well" dir="auto">
        #target4
        #target5
        #target6
      </div>
    </div>
  </div>
</div>