Responsive certification - challenge problem

[MartinLupa]

Hello everyone! First time here using this space…
I am currently having two issues:

• Cant make the “welcome section” to be the height of the view port, while also…
• Maintaining the nav element fixed on top of the screen.

I can’t figure out what I am doing wrong…
Thank you so much for your help!

My code:

/*STYLE*/

 .nav-div {
    width: 100%;
    z-index: 9999;
    position: relative;
    display: flex;
    justify-content: center;
 }

ul {
    list-style: none;
}
li {display: inline-block;}

.welcome-section {
  position: relative;
  margin: 0;
  background-color: #ccf2f4;
  padding-top: 20px;
  padding-bottom: 65px;
  display: block;
  height: 100vh;
  width: 100%;
}


/* HTML*/

  <div class="nav-div">
  <nav id="navbar">
    <ul>
      <li><a href="#welcome-section">Welcome</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#projects">Skills</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
    </div>
  <div class="welcome-section" id="welcome-section">
    <img class="top-cloud" src="https://i.postimg.cc/k5HRbqbf/cloud.png" alt="cloud-img">
    <h1>I'm Martin</h1>
    <h3>Accounting and Business Management</h3>
    <h3>Python and Web Development student</h3>
    <img class="bottom-cloud" target="_blank" src="https://i.postimg.cc/k5HRbqbf/cloud.png" alt="cloud-img">
    <img class="mountain-pic" target="_blank" src="https://i.postimg.cc/j20WMcvf/mountain.png" alt="mountain-img">
  </div>

[llim]

If you want to make an element to be at the top of the screen, you should use sticky position instead of relative. Relative position means that the element is still a part of layout, so when the page is scrolled, the element may go out of screen. Speaking of welcome-section, there is no need to set position to relative as well, because the element has no offsets (top, bottom, left, right properties).

You can read more about CSS position at https://developer.mozilla.org/docs/Web/CSS/position

[jsdisco]

Paddings increase the width and height of an element, but you can avoid that by setting box-sizing:border-box on the welcome-section.