Trouble with html displaying under the title bar

HTML-CSS
#1

Tell us what’s happening:
Thanks in advance for your comments…

When the page initiates, everything looks fine…however, whenever I navigate (for example, clicking the link in the menu) The page is hidden by the menu bar at the top.

Your CSS code so far

html body {
  font-family: 'Open Sans', sans-serif;
  text-align: left;
}

.navbar {
  background-color: #333;
  overflow: hidden;
  position: fixed;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 500;
}

/* The navigation bar */
.navbar a {
  color: white;
  display: inline-block;
  padding: 15px;
}

/* Change menu item on mouse-over */
.navbar a:hover {
  color: red;
  background-color: darkgray;
  transition-duration: 0.5s;
}

/* Main content */
.main {
  margin-top: 55px;
}

h1 {
  background-color: aqua;
  border: 3px solid black;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
}

.projects {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 1fr));
}

.project-tile {
  border: 1px solid black;
}

#welcome-section {
  display: block;
  height: 100vh;
  margin-top: 0;
  padding-top: 0;
}
@media screen and (max-width: 600px) {
  .column {
    width: 40%;
    padding-top: 0;
  }
}

Your code so far

        <!-- Test validation script -->
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>  
<!-- Test validation script -->

<nav class="navbar " id="navbar">
  <a href="#welcome-section">Home</a>
  <a href="#WebDesignProjects">Responsive Web Design Projects</a>
</nav>

<div class="main">
  <!-- Welcome section -->
  <div id="welcome-section" class="home">
    <h1>My Projects...by Flynt</h1>
    This is my first foray into HTML.<p>
    See my work at Codepen.io 
    <a href="https://codepen.io/Flynt" id="profile-link" target="_blank">here</a><p>
  </div>
  
  <!-- Projects section -->
  <div id="projects">
    <h1>FreeCodeCamp - Responsive Web Design Projects</h1>
    <div id="WebDesignProjects" class="projects">
      <div id="TributePage" class="project-tile">
        <a href="https://codepen.io/Flynt/full/mGBgpe" target="_blank">
          <img src="https://codepen.io/Flynt/pen/mGBgpe/image/small.png" alt="Tribute Page" >
        </a><p>
        <b><center>Tribute Page</center></b><p>
      </div>
    </div>
  </div>
</div>

Your browser information:

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

Challenge: Build a Personal Portfolio Webpage

Link to the challenge:

#2

This is a frustrating issue to deal with, but a little magical css modifying should help with it. Regarding why it’s happening, if you click on the in-page link in your navigation bar, it will put whatever it is linked to at the very top of the page. Because the title is getting pushed to the top, it will go behind the absolutely positioned navbar.

This here is a helpful thread on the issue that might help you with your problem. Good luck!

#3

Thanks for the help!

CSS Tricks had a great discussion on this topic:
Fixed Headers, On-Page Links, and Overlapping Content, Oh My!

#4