Responsive certification - challenge problem

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:


 .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">
      <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>
  <div class="welcome-section" id="welcome-section">
    <img class="top-cloud" src="" 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="" alt="cloud-img">
    <img class="mountain-pic" target="_blank" src="" alt="mountain-img">

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

1 Like

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.