Build a personal portfolio webpage

Hi Everyone!

I feel stuck with my last point of this assignment which is fixing the navbar on the top of the viewport. I have tried different combinations but it seems like I am still missing out on something. I would highly appreciate your opinion!

Here is my code:

<!DOCTYPE html> 
<html lang="en">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width"initial-scale=1.0">
      <title>My Personal Portfolio Webgage</title>
      <link rel="stylesheet" href="styles.css">
      rel="stylesheet" href="" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


  <header id="header">
     <nav id="navbar" class="nav">
          <li><a href="#welcome-section">About</a></li>
          <li><a href="#projects">Work</a></li>
          <li><a href="#contact">Contact</a></li>


    <section id="welcome-section">
      <h1>Hey I am Mimic</h1>
      <p>A Web Developer</p>


    <section id="projects">
      <h1>These are some of my projects</h1>
        <a href="" target="_blank"></a>
        <img src="" alt="Tribute Page" title="Tribute Page">
        <p class="project-tile">Tribute Page</p>

    <section id="contact">
      <h1>Let's work together</h1>
      <p>How do you take your coffee?</p>

      <div id="contact">
        <a id="profile-link" href="" target="_blank"></a>




      <p>**This is just a fake portfolio. All the projects and contact details given are not real.</p>
      <p>&copy; Created for freeCodeCamp</p>


And CSS:

@media screen only and (width:1500px)

#navbar {
  display: flex;
  flex-direction: column;
  position: fixed;
  text-align: center;
  width: 100vw;
  • Media query hasn’t a properly written syntax.
  • ‘body’ element should be found after the ‘head’ element
  • body element must have the closing tag before the </html> tag
  • you should add after the ‘position’ property, ‘left’ and ‘top’ properties set to zero