Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Tell us what’s happening:
Describe your issue in detail here.
I only can’t see the full preview of my work. I was following results of big changes that I was introducing and suddenly the preview was cut and only the navbar and the main titles remained. My changes were mainly in the HTML code. I guess I did something wrong but I don’t realise it. Please tell me what i got wrong.
Thank you.

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <title>Personal Portfolio Page</title>
<link rel="stylesheet" href="styles.css">
    </head>
<body>
  <navbar id="nav-bar">
    <a class="nav-link" href="#About">About</a> 
    <a class="nav-link" href="#Coding Work">Coding Work</a> 
    <a class="nav-link" href="#Contact">Contact</a>
    </nav-bar>  
  <main>
    <section id="welcome-section">
      <h1>MY PERSONAL PORTFOLIO</h1>
       <p><span class="bold name"> <i>Hamdy ElHinnawy</i></p>
       <p><span class="bold"> </span></p>
      </section>
  <section id="About"> 
    <header class="dhead"><a name="About">About</a></header>
<p>With this portfolio I am not addressing recruiters. I am an economist and have my PhD in economics from the LSI early in 1983.</p>
<p>For the time being I learn coding as a hobby, and in this field I am a beginner. My intention is to continue learning and in due course will decide what to do with my learning.</p>
<p>One more reason for not addressing recruiters is that I am more than 80 years old and will surely not compete with youth. I just continue learning for life  
 </section>      
     <section   id="projects">
<header class="dhead"> <a name="Coding Work">Coding Work</a></header>

<article class="project-tile">
 <h2>Survey Form</h2>
  <p>This form was to collect data for the purpose of clarifying a profile that may be unclear</p>
<p> This is normally done in a research, where profile included name, gender, age and hobbies, among other things</p>
<p>See this project at <a href="https://Survey Form: Build a Survey Form | freeCodeCamp.org" target="_blank" rel="noopener noreferrer">freecodecamp</a>
  </article>

    <article class="project-tile">
  <h2>Tribute Page</h2>
      <p>This was a tribute for the Egyptian writer Naguib Mahfouz<p>
        <p> His work was a blunt expression of his ideas dealing with Egypt’s development in the 20th century</p>
        <p>He was a Nobel Lauriette, who was awarded the 1988 Nobel Prize in Literature</p>
        <p>See the project at <a href="https://Tribute Page: Build a Tribute Page | freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
   </article>   

      <article class="project-tile">
    <h2>Technical Documentation Page</h2>
      <p>This page documented the process of design and manufacturing of a printed circuit board</p>
<p>It highlighted six steps of the process referring to the old methods and the modern ones that rely of software<p/>
<p>See the project at <a href="https://www.Technical Documentation Page: Build a Technical Documentation Page | freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
      </article>

      <article class="project-tile">
      <h2>Product Landing Page</h2>
      <p>This page was about a store called Child Play</p>
      <p>It gave a representation of products that it sells, services that it provides and its pricing list</p>
      <p>See the project at <a href="https://www.Product Landing Page: Build a Product Landing Page | freeCodeCamp.org" target="_blank" rel="noopener noreferrer"> freeCodeCamp<a></p>
      </article>
      </section>
    </main>
  </body>
  </html>
/* file: styles.css */
#nav-bar {
  display: flex;
  flex-direction: column;
  position: fixed;
  text-align: center;
  width: 100vw;
}
.nav-link {
  text-decoration: none;
}
#welcome-section {
  height:100vh; 
  text-align: center;
position:absolutee;
  padding: 50% 0; 
  display: flex;
  flex-direction: column;
}
h1 {
  font-size: 2rem; 
}
.name {
  font-size: 2rem;
}
#about {
  padding-left: 20px;
}
#profile-link {
  color: blue;
}
.bold {
  font-weight: 800;
}
.bold.prelude {
  font-size: 20px;
}
.dhead {  font-weight: bold;
  font-size: 18px;
  margin-left: -20px;
}
.project-tile {
  padding-left: 20px;;  
}

Your browser information:

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

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

There is no navbar HTML element. I think you mean nav. Also, make sure you are closing it off properly.

Thank you. You are right. The preview appeared completely just after correcting the nav element.