Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:

I’m currently on the Personal Portfolio Webpage challenge and I’ve run into a problem with navbar, I’m stuck on the last challenge which states that my navbar needs to always be at the top of the page.
The thing is I’ve searched around for a solution for a week and none of the offered solutions have helped. I’ve tested about all of the solutions I’ve come across to see if they would help but none of them have helped so far.

Your code so far

<!-- file: index.html -->
 <link rel="stylesheet" href="styles.css">
<header id='header'>
<ul id='navbar'>
<li><a href='#welcome-section'><b>Welcome Section</b></a></li>
  <li><a href='Projects'><b>Projects</b></a>
    </li>
</div> 
</ul></header>


<div id="welcome-section">
  
  <h1>Welcome!</h1>

  </div>

<p><b>Hello</b>, my name is Sean, I'm a digital artist and animation artist. I recently graduated from <b>Full Sail University</b> and am looking to increase my skills in the industry.</p>

<div id="projects">

  <div class="project-tile"></div>

  <a href='https://www.artstation.com/artwork/zDbgxm'><h2>Follow me on Artstation! <3 </h2></a>
</div>

<div id='Profiles'>

  <a id='profile-link' target='_blank' href='https://www.freecodecamp.org/BlazingGunRose'><h2>My Freecodecamp Profile</h2></a> </div>
  

  <iframe width="560" height="315" src="https://www.youtube.com/embed/N8PhlWm-RWg?si=jInls4tA3-W31n2M" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>


/* file: styles.css */
Styles.css

#nav-bar {
  z-index: 10000;
  display: flex;
  position: fixed;
  width: 100%;
  top: 0;
  left: 420; 
}

header {
  
  display: inline-block;
  position: fixed;
  width: 100%;
  top: -55;
  left: 350; 
}

body {
  margin: 0;
}

ul{
  margin: 80px;
}
li {
  display: inline-block;
}
@media only screen and (min-width: 300px) {
  body {
    background-color: #ffecb3;
  }
}
.flex {
  display: flex;
}

Your browser information:

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

Challenge Information:

Personal Portfolio Webpage - Build a Personal Portfolio Webpage

2

Are you certain your styles are actually being applied?

All the best!