<p dir="auto">Test allowed me to pass even though I had a typo on paragraph tag.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/8842064/14566687/7a0d664a-0328-11e6-98b3-9ae8d5fae234.png"><img src="https://cloud.githubusercontent.com/assets/8842064/14566687/7a0d664a-0328-11e6-98b3-9ae8d5fae234.png" alt="2016-04-15 1" style="max-width: 100%;"></a><br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/8842064/14566691/7e446074-0328-11e6-9863-15ef7cdde1a2.png"><img src="https://cloud.githubusercontent.com/assets/8842064/14566691/7e446074-0328-11e6-9863-15ef7cdde1a2.png" alt="2016-04-15" style="max-width: 100%;"></a></p>

<h4 dir="auto">Challenge Name</h4>

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

<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version:</li>
<li>Operating System:</li>
<li>Mobile, Desktop, or Tablet:</li>
</ul>
<h4 dir="auto">Your Code</h4>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="// If relevant, paste all of your challenge code in here
"><pre class="notranslate"><span class="pl-c">// If relevant, paste all of your challenge code in here</span></pre></div>
<h4 dir="auto">Screenshot</h4>
<p dir="auto">Challenge <a href="http://www.freecodecamp.com/challenges/waypoint-set-the-font-family-of-an-element#?solution=%3Cstyle%3E%0A.red-text%20%7B%0Acolor%3A%20red%3B%0A%7D%0A%0Ap%20%7B%0Afont-size%3A%2016px%3B%0A%7D%0Ap%20%7B%20font-family%3A%20monospace%7D%0A%3C%2Fstyle%3E%0A%0A%3Ch2%20class%3D%22red-text%22%3ECatPhotoApp%3C%2Fh2%3E%0A%0A%3Cp1%20class%3D%22red-text%22%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%0A%3Cp2%3E%20Purr%20jump%20eat%20the%20grass%20rip%20the%20couch%20scratched%20sunbathe%2C%20shed%20everywhere%20rip%20the%20couch%20sleep%20in%20the%20sink%20fluffy%20fur%20catnip%20scratched.%3C%2Fp%3E" rel="nofollow">Waypoint: Set the Font Family of an Element</a> has an issue.<br>
User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0</code>.<br>
Please describe how to reproduce this issue, and include links to screenshots if possible.</p>
<p dir="auto">A camper went to the chat talking about enumerating paragraphs with this 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;
}

p {
font-size: 16px;
}
p { font-family: monospace}
&lt;/style&gt;

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

&lt;p1 class=&quot;red-text&quot;&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;

&lt;p2&gt; Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.&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-ent">p</span> {
<span class="pl-c1">font-size</span><span class="pl-kos">:</span> <span class="pl-c1">16<span class="pl-smi">px</span></span>;
}
<span class="pl-ent">p</span> { <span class="pl-c1">font-family</span><span class="pl-kos">:</span> monospace}
<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">p1</span> <span class="pl-c1">class</span>="<span class="pl-s">red-text</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>

<span class="pl-kos">&lt;</span><span class="pl-ent">p2</span><span class="pl-kos">&gt;</span> Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.<span class="pl-kos">&lt;/</span><span class="pl-ent">p</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">The code passed the test. The problem is that he opened the paragraph as <code class="notranslate">p1</code> but closed it as <code class="notranslate">p</code>, so the browser creates an empty paragraph to balance the tags and the final structure is something like this:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;p1&gt;
  Kitty ipsum...
  &lt;p&gt;&lt;/p&gt;
  &lt;p2&gt;
    Purr...
    &lt;p&gt;&lt;/p&gt;
  &lt;/p2&gt;
&lt;/p1&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">p1</span><span class="pl-kos">&gt;</span>
  Kitty ipsum...
  <span class="pl-kos">&lt;</span><span class="pl-ent">p</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>
  <span class="pl-kos">&lt;</span><span class="pl-ent">p2</span><span class="pl-kos">&gt;</span>
    Purr...
    <span class="pl-kos">&lt;</span><span class="pl-ent">p</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>
  <span class="pl-kos">&lt;/</span><span class="pl-ent">p2</span><span class="pl-kos">&gt;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">p1</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">In the end, there are valid paragraphs (those created by the browser) with the <code class="notranslate">Monospace</code> font.</p>
<p dir="auto">Although the objective of this waypoint is styling the paragraphs, which it's done correctly, I think it might be important to check for cases like this too.</p>
<p dir="auto">Possible solution: add a test for checking if the paragraphs are empty.</p>