Portfolio project error

Code Feedback
1

i am getting error with test number 11.
It is about height as viewport.


h1{
 
 
 
}
* {
  margin: 0;
  padding: 0;
}

.intro {
  top: 0;
  background: #e0ebe8;
  min-height: 75vh;
  padding-top: 45vh;
  /*   line-height: 100vh; */
 /*   width:100%;
  height:96vh;
border:solid; */
}
#header{
position: fixed;
  text-align:right;
  top: 0;
  min-height: 75px;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: right;
 margin-top:10px;
 margin-left:20px;
}
html,body{
 font-family: 'Open Sans', sans-serif;
  text-align: center;
  height:100%;
  width:100%;
  z-index: 1;
  margin:0;
  padding:0;
}
#first{
  
}

#welcome-section{
    height:100%;
  text-align : center;
 display:block;
  background-color:#afffcd;
}
#nav{
 width: 100%;
  margin-left:1000px;
  margin-top:10px;
  font-weight: 400;
    position:fixed;
  text-align:right;
  height:10%;
}
.nav-link{
  
}
.project-tile{
  background-color:#deede4;
}
.codepen{
  
}
button{
  border-radius:50%;
   background-color: #deede4; /* Green */
  border: none;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
@media only screen and (max-width: 367px) {
  nav{
 width: 100%;
  margin-left:1000px;
  margin-top:10px;
  font-weight: 400;
    position:fixed;
  text-align:right;
  height:10%;
}
}
2 
 <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<body>
    <header id="header">
    <nav id="navbar" class="nav-link">
      <a   class="nav-link" href="#About">About</button></a>
       <a  class="nav-link" href="#projects">Work</></a>
            <a   class="nav-link" href="#profile">Contact
              </a>         
   </nav>
  </header>
    
<section id="welcome-section" class="intro">
  <div id="first">
    <section id="About">
    <h1>Hey I am Hardik Khanesa </h1>
  <p>A web Developer</p>
  </div>
    </section>
  </section>
<section id="projects" class="project-tile">
  <h1>There are some of my projects</h1>
 <a class="project-tile" href="https://codepen.io/hardikkhanesa/full/bzvWej"> Product landing page</a><br>
  <a href = "https://codepen.io/hardikkhanesa/full/yQWwjM ">Survey Form</a>
  <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hardikkhanesa" data-slug-hash="yQWwjM" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="survey form">
  <span>See the Pen <a href="https://codepen.io/hardikkhanesa/pen/yQWwjM/">
  survey form</a> by hardik (<a href="https://codepen.io/hardikkhanesa">@hardikkhanesa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
  ---------
  <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hardikkhanesa" data-slug-hash="bzvWej" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="Product landing Page">
  <span>See the Pen <a href="https://codepen.io/hardikkhanesa/pen/bzvWej/">
  Product landing Page</a> by hardik (<a href="https://codepen.io/hardikkhanesa">@hardikkhanesa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
  -----------------
  <p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="hardikkhanesa" data-slug-hash="aXYPpP" data-preview="true" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1em 0; padding: 1em;" data-pen-title="fcc documentation">
  <span>See the Pen <a href="https://codepen.io/hardikkhanesa/pen/aXYPpP/">
  fcc documentation</a> by hardik (<a href="https://codepen.io/hardikkhanesa">@hardikkhanesa</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</section>


<section id="profile" id="profile-link">
  <h1>Let's Work together</h1>
  <button><a  id="profile-link" href="https://www.facebook.com/hardikkhanesa.99" target="_blank">facebook</a></button>
    <button>
      <a id="profile-link" href="https://twitter.com/hardik_khanesa" target="_blank">twitter</a>
    </button>
  <button><a id="profile-link" href="https://www.instagram.com/hardik_khanesa/" target="_blank">Instagram</a>
  </button>
  <button><a id="profile-link" href="https://github.com/Hardikkhanesa" target="_blank">Github</a>
  </button>
</section>
</body>
3

The tests are looking good, did you fix it ?

4 
#welcome-section {
    height: 100%;
}

isn’t exactly the same thing as setting the height of the welcome section equal to the height of the viewport.