title: The main element must not appear as a descendant of the section element
body: <p>I'm trying to fix the errors of my site that appear in the W3C Markup Validator:
  <a href="https://validator.w3.org/nu" rel="nofollow noreferrer">https://validator.w3.org/nu</a></p>
  
  <p>One of the errors that I can't fix is:</p>
  
  <blockquote>
    <p>The main element must not appear as a descendant of the section
    element</p>
  </blockquote>
  
  <p>The code in this area is:</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-html lang-html prettyprint-override"><code>&lt;section id="sp-section-2"&gt;
   &lt;div class="row"&gt;
    &lt;div id="sp-title" class="col-lg-12 "&gt;
     &lt;div class="sp-column "/&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/section&gt;
  &lt;section id="sp-main-body"&gt;
   &lt;div class="row"&gt;
    &lt;main id="sp-component" class="col-lg-12 " role="main"&gt;
     &lt;div class="sp-column "&gt;
      &lt;div id="system-message-container"&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Tried to move or change the name but can't make it work.</p>