How do incorporate the code element in the Technical documentation page?

Tell us what’s happening:
When ever I add the code element to fulfill my the challenge is messes up my web page.
Your code so far

WARNING


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Tech Documentation Page</title>
  <link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
  <div class="background-img">
    
  <nav id="navbar">
    <header><div class="title"><i>Top Five NBA Players of All Time</div></header>
   <a class="nav-link" href="#Michael_Jordan"><code>Michael Jordan</code></a>
   <br>
 <a class="nav-link" href="#LeBron_James"><code>LeBron James</code></a>
 <br>
 <a class="nav-link" href="#Kareem_Abdul-Jabbar"><code>Kareem Abdul-Jabbar</code></a> 
 <br>
 <a class="nav-link" href="#Erving_Magic_Johnson"><code>Erving Magic Johnson</code></a>
 <br> 
 <a class="nav-link" href="#Kobe_Bryant"><code>Kobe Bryant</code></a></i>

  </nav>
 <main id="main-doc">
  <section id="Michael_Jordan" class="main-section">
    <header>Michael Jordan</header>
    <p class="career"> Michael Jordans Playing career lasted over 15 seasons in the NBA with 2 retirements in between.</p>
 <p>
<ul>
  <li><span class="accolades">Notable Accolades</span></li>
<ul>
  <li>Six-time Finals MVP</li>
  <li>Five-time Regular Season MVP</li>
  <li>Ten-time All-NBA First Team selections</li>
  <li>Nine-time All-Defensive Team selections</li>
 </ul>
</ul>
</p>
   </section>
   <img id="jordan-photo" src="https://e00-marca.uecdn.es/assets/multimedia/imagenes/2022/02/17/16451255007747.jpg" />
<div class="break">
  <section id="LeBron_James" class="main-section">
 <header>LeBron James</header>
 <p class="career">LeBron James has current played for 19 seasons in the NBA starting in 2003 and is still playing today.</p>
 <p>
  <ul>
    <li><span class="accolades">Notable Accolades</span></li>
  <ul>
    <li>Four time Finals MVP</li>
    <li>Four time Regular Season MVP</li>
    <li>Thirteen-time All-NBA First Team selections</li>
    <li>Six-time All-Defensive Team selections</li>
    </ul>
  </ul>
  </p>
  </section>
 <img id="lebron-photo" src="https://library.sportingnews.com/2021-12/lebron-james-los-angeles-lakers_kej02uf93prj18vqxkh8dfnqk.png"/>
  <section id="Kareem_Abdul-Jabbar" class="main-section">
<header>Kareem Abdul-Jabbar</header>
<p class="career">Kareem Abdul-Jabbar played for 2 season in the NBA.</p>
 <p>
<ul>
  <li>Notable Accolades</li>
  <ul>
  <li>Two-time Finals MVP</li>
  <li>Six-time Regular Season MVP</li>
  <li>NBA all time leading point scorer</li>
  <li>Eleven-time All-Defensive Team selections</li>
  </ul>
</ul>
</p>
  </section>
<img id="kareem-photo" src="http://a.espncdn.com/photo/2009/0528/nba_jabbarhooks_800.jpg"/>
  <section id="Erving_Magic_Johnson"class="main-section">
     <header>Erving Magic Johnson</header>
     <p class="career"> Erving "Magic" Johnson played for 13 seasons in the NBA.</p>
      <p>
<ul>
  <li><span class="accolades">Notable Accolades</span></li>
  <ul>
  <li>Three-time Finals MVP</li>
  <li>Three-time Regular Season MVP</li>
  <li>Nine-time All-NBA First Team selections</li>
  <li>Four-time NBA assist leader</li>
  </ul>
</ul>
</p>
  </section>
<img id="magic-photo" src="https://library.sportingnews.com/2022-05/nba-plain--2f937cdd-88c7-4988-b48c-b0d5af47e7a4.png"/>
  <section id="Kobe_Bryant" class="main-section">
<header>Kobe Bryant</header>
 <p class="career">Kobe Bryant played for 20 seasons in the NBA, starting in 1996 and ending in 2016;</p>
  <p>
<ul>
  <li><span class="accolades">Notable Accolades</span></li>
  <ul>
  <li>Two-time Finals MVP</li>
  <li>One Regular Season MVP</li>
  <li>Eleven-time All-NBA First Team selections</li>
  <li>Twelve-time All-Defensive Team selections</li>
  </ul>
</ul>
</p>
  </section>
 <img id="kobe-photo" src="https://c4.wallpaperflare.com/wallpaper/963/985/309/kobe-bryant-wallpaper-preview.jpg"/>
 </main>
</body>
</html>
html{
  width: 1505px;
  max-width: 1505px;
  overflow-x: hidden;

}
#navbar{
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 225px;
  border: 5px solid black;
  
}
.rank{
  font-size: 40px;
}
.main-section{
  padding: 30px 250px;
  color: white;
  text-align: center;
  position: relative;
  left: 100px;
}
li{
  font-size: 25px;
  padding: 15px
}
header{
  font-size: 30px;
  text-decoration: underline;
}
  #navbar header{
    font-size: 30px;
  text-align: center;
  border-bottom: 10px solid black;
  }
  code{
    display: block;
    color: black;
    font-size: 25px;
    padding: 15px;
  }
  code:hover{
    color: red;
    font-weight: bold;
  }
  #Michael_Jordan{
  top: -20;
}
.career{
  font-size: 30px
}
#jordan-photo{
  z-index: -1;
  position: absolute;
  top: 0;
  left: 14.6rem;
  height: 85%;
  border-bottom: 5px solid white;
 border-top: 5px solid black;
  display: block;
  max-width: 1280px;
  max-height: 800px;
  width: 100%;
 filter: brightness(60%);
}
.accolades{
  font-size: 30px
}
#lebron-photo{
  z-index: -1;
  position: absolute;
  top: 480px;
  left: 14.6rem;
  height: 85%;
  border-bottom: 5px solid white;
 border-top: 10px solid white;
  display: block;
  max-width: 1280px;
  max-height: 800px;
  width: 100%;
 filter: brightness(60%)
}
#Lebron_James{

  top:-70;
}
#kareem-photo{
  z-index: -1;
  position: absolute;
  top: 960px;
  left: 14.6rem;
  height: 100%;
  border-bottom: 5px solid red;
 border-top: 10px solid white;
  display: block;
  max-width: 1280px;
  max-height: 800px;
  width: 100%;
 filter: brightness(60%);
 overflow: hidden;
}
#Kareem_Abdul-Jabbar{
  top: -100;
  padding-bottom: 0px;
}
#magic-photo{
  z-index: -1;
  position: absolute;
  top: 1440px;
  left: 14.6rem;
  height: 85%;
  border-bottom: 5px solid white;
 border-top: 10px solid white;
  display: block;
  max-width: 1280px;
  max-height: 800px;
  width: 100%;
 filter: brightness(60%)
}
#kobe-photo{
z-index: -1;
  position: absolute;
  top: 2020px;
  left: 14.6rem;
  height: 85%;
 border-top: 10px solid white;
  display: block;
  max-width: 1280px;
  max-height: 800px;
  width: 100%;
 filter: brightness(60%);
border-bottom: 30px solid black;
}
#Kobe_Bryant{
  top: 50;
}
#Erving_Magic_Johnson{
  top: -100;
}
@media (max-width: 800px){
  width: 600px
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.0.0 Safari/537.36

Challenge: Build a Technical Documentation Page

Link to the challenge: