title: Is there a problem with my code editor, or with my inheritance code?
body: <p>Within my navigation bar, I added a p element. As I set the nav font size to 18px, all the anchor elements and the p element became 22px. I expected this for the p element because earlier I set all p elements to 22px, but why did it affect the anchor links within the navigation bar? I inspected this with DevTools and for some reason, when I added the p element, every anchor element within the nav element became nested within a p element, even though I never coded that.
  Here is my HTML code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>p {
    font-size: 22px;
    line-height: 1.5;
  }
  
  nav {
    font-size: 18px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;p&gt;This is the navigation&lt;p&gt;
    &lt;a href="blog.html"&gt;Blog&lt;/a&gt;
    &lt;a href="#"&gt;Challenges&lt;/a&gt;
    &lt;a href="#"&gt;Flexbox&lt;/a&gt;
    &lt;a href="#"&gt;CSS Grid&lt;/a&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is what DevTools shows:</p>
  <pre><code>&lt;nav&gt;
    &lt;p&gt;This is the navigation&lt;p&gt;
    &lt;p&gt;
      &lt;a href=&quot;blog.html&quot;&gt;Blog&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;Challenges&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;Flexbox&lt;/a&gt;
      &lt;a href=&quot;#&quot;&gt;CSS Grid&lt;/a&gt;
    &lt;p&gt;
  &lt;/nav&gt;
  </code></pre>