Unable to make code elements descendant of section elements

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**
<main id="main-doc"> 
  <section id="code_village" class="main-section"> 
    <header>code village</header>
    <p> nigeria is my country</p>
    <p> kwara is my state </p>
  <span> there is hope </span>
  </section>
  <section id="ilorin" class="main-section">
    <header>ilorin</header>
    <p> there is a good boy in</p>
    <p> the boy is handsome</p>
  <span> there is hope </span>
     </section>
  <section id="kwara_state" class="main-section"> 
    <header>kwara state</header>
    <p> lets play the game</p>
    <p> we need to start now</p>
 <span> there is hope </span>
  </section>
  <section id="Nigeria" class="main-section"> 
    <header>Nigeria</header>
    <p> no food for lazy man</p>
    <p> everyone should sit up</p>
  <span> there is hope </span></section>
  <section id="Africa" class="main-section"> 
    <header>Africa</header>
    <p> there is need for second chance</p>
    <p> second chance might be too late</p>
    <span> there is hope </span>
  </section>

…?


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').