Não estou a conseguir sair, por favor ajuda. Portifólio

Estou travado no Portfolio tests. Fiz os desafios e até conseguí passar 11 falta 1. O desafio pede para fazer a  altura da seção ocupar a altura da tela inteira, tentei de todas as formas mas não estou conseguir.  Peço ajuda por favor.
<body>
  <header>
    <nav id="navbar"> 
      <h2>Potfólio de Desenvolvedor</h2>
      <ul>
        <li><a href="#projects">Meus projetos</a></li>
        <li><a href="#">Redes sociais</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>  
  </header>
  <main id="main-text">
    <section id="welcome-section">
      <h1>Seja muito bem vindo ao meu potfólio!</h1>
      <p>Você está no potfólio de Lucas M . Alface</p>
      <p>Neste potfólio você vai encontrar:
      <ul>
        <li>Meus projetos</li>
        <li>minhas redes sociais</li>
        <li>Meu contato</li>
        <ul>
        </p>
        <p>Para facilitar sua navegação na página, clique nos links de navegação no menu na barra superior desta página se preferir.</p>
    </section>
      <section class="Survey-form" id="projects">
      <h2>Meus projetos</h2>
      <div class="project-tile">
        <a href="https://codepen.io/desenv43/pen/ZEagyPO" target="_blank" id="survey-form"><button>Survey form</button></a>
        <p>Visit may second project Survey form
        </p>
      </div>
      <div id="Landing-page"><a href="https://codepen.io/desenv43/pen/zYpOdRE"><button>Landing page</button></a>
        <p>Visit the project Landing page</p>
      </div>
      <div id="Tecnical-documentation"><a href="https://codepen.io/desenv43/full/dyJybmx"><button>Tecnical documentation</button></a>
        <p>Visit project tecnical documentation now</p>
      </div>
      </section>
      
    <section id="navbar">
      
    </section>
    
  </main>
  <footer>
    <h2>Minhas redes sociais</h2>
    <p><a href="https://github.com/DevMz35?tab=projects&type=beta" target="_blank" id="profile-link">GitHub</a></p>
  </footer>
</body>

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600&family=Open+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');
*{
  font-family: 'Fredoka', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Playfair Display', serif;
  margin: 0;
  padding: 0;
}
h1{
  text-align: center;
}

header{
  width: 100vw;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  display: inline-block;
  background: #000;
}

#navbar{
  width: 80vw;
  height: 60px;
  display: inline;
  background: red;
  margin: auto;
}

#navbar ul{
  float: right;
}

#navbar a{
  text-decoration: none;
  color: #fff;
}
#navbar ul li{
  display: inline;
  margin-right: 0;
  margin-top: 0;
  padding: 10px;
  text-transform: uppercase;
  line-style: none;
}

#navbar h2{
  float: left;
  margin-left: 0;
  margin-top: 0;
  color: #fff;
  text-transform: uppercase;
  padding: 10px;
}

#main-text{
  width: 100vw;
  margin: auto;
}

#main-text h2{
  text-align: center;
}

#welcome-section{
  width: 100vw;
  height: 100vh;
  margin: auto;
  padding: 20px;
  background: green;/* Apenas para textar se a secao ocupa a tele inteira*/
  background-size: 100%;
}

#welcome-section h1{
  text-transform: uppercase;
}
#welcome-section{
  h1,p,ul{
    position: absolute;
    top: 60%;
    left: 40%;
  }
}

}
#projects{
   width: 80vw;
  height: 100vh;
  background: yellow;
  margin: auto;
}

.Survey-form{
  width: 80vw;
  height: 80vh;
  margin: auto;
  padding: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
} 
.project-tile{
  width: 8em;
  height: 10em;
  padding: 3em;
  border: 1px solid #ccc;
  border-radius: 5px;
}


#Landing-page{
   width: 8em;
  height: 10em;
  padding: 3em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

#Tecnical-documentation{
   width: 8em;
  height: 10em;
  padding: 3em;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button{
  padding: 10px;
  width: 150px;
  border-radius: 5px;
  border: none;
  background: #000;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

button:hover{
  background: #fff;
  color: #000;
}

@media(min-width 1200px){
  body{
    background: #ccc;
    color: #000;
  }
}


Olá, Seria melhor copiar e colar o endereço do site ‘codepen’ para seu projeto.

It would be best to copy and paste the codepen website address for you project.

To the #welcome section

#welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: green;/* Apenas para textar se a secao ocupa a tele inteira*/
 
}

2 Likes

Muito obrigado pela ajuda.

1 Like