My code is not running even when I have finished all the requirements

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

  **Your code so far**
/* file: index.html */
see<!DOCTYPE HTML >
<html>
<head><Link rel="stylesheet" href="style.css" />
<meta charset="UTF-8" /><meta name="viewport" content="width=device -width, initial-scale=1.0" /></head>
<body>

<main id="main-doc">
  <section class ="main-section " id="Birth_of_Ojadile"><header>Birth of Ojadile</header >
  <p>Ojadile was the sole male and last child of his parents: </p>
  <ul ><li>one </li >
  <li>two </li>
  </ul >
      <p>He was born in <code>Amandine</code > Lokoja </p>

  </section>

      <section class ="main-section " id="Travails_of_a_youth"><header>Travails of a youth</header>
         <p>When he was but a teen, his father passed away:</p>
         <ul>
             <li>three </li>
             <li >four </li >
             </ul >
          <p>He had to balance between managing his father's business and taking  care if the why<code>family</code> </p>
      
               </section>

          <section class ="main-section " id="A_new_dawn"><header>A  new dawn </header >
              <p>Due to his faithfulness and diligence to his work the business <code>prospered</code> </p>
                  <p>He started opening branches in several  locations  and places </p>

          </section>

              <section class ="main-section " id="Battle_of_kings"><header>Battle of kings</header >
                  <p>He encountered numerous envious people  who don't like how successful he has become:</p>
              <ul><li>five </li></ul >
                      <p>Ojadile overcame  all adversities  because  of his <code>unyielding</code> spirit </p>

              </section>
                  <section class ="main-section "id="Fall_of_an_emperor"><header>Fall of an emperor </header>
                      <p>Ojadile lived  a good  life and was helpful to the <code>society</code></p>
                          <p>The sun rises and set so is a the death of a <code>noblenoble</code >  natural </p>
                          </section>
                  
  </main>
  <nav id="navbar">
      <header>Nav links </header >
        <a href="#Birth_of_Ojadile" class ="nav-link ">Birth of Ojadile</a >
                                              <a href="#Travails_of_a_youth " class ="nav-link ">Travails of a youth </a >
                                                              <a href="#A_new_dawn" class ="nav-link ">A new dawn</a >
                                                                              <a href="#Battle_of_kings" class ="nav-link ">Battle of kings</a >
                                                                                              <a href="#Fall_of_an_emperor" class ="nav-link ">Fall of an emperor</a >
                                                                                              


      </nav>
</body>
</html>
/* file: styles.css */
html {box-sizing:border-box;}
body {background :#3bbcef;
}

@media screen and(max-width:1200px){background:white;}

p{font-size:1.2rem;
font-weight:400;}
@media(min-width:500p){p{font-size:2rem;}}
  **Your browser information:**

User Agent is: Mozilla/5.0 (Linux; Android 9; A3_Pro) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Mobile Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge:

some syntax issue here.
Consider use validator. I found it there.