Hey guys, I have some problems with my Personal Portfolio Page. I can`t post a link
The blue color isnt fullscreen, there is a gap as you can see in the codepen link. And if you scroll you can see the navbar is not on top, there is also a big gap between the navbar and the site. If I run the test it doesn
t pass " The navbar should always be at the top of the viewport."
My HTML code
<nav>
<ul id="navbar">
<li><a href="#welcome-section">about</a></li>
<li><a href="#projects">projects</a></li>
</ul>
<div id="welcome-section">
<h1> hi, i`m burak </h1>
<p> a web developer</p>
</div>
<div id="projects" class="work">
<h2 class="project-tile"> some of my projects </h2>
<a href="https://codepen.io/burakd/pen/vPmvoJ" target="blank" class="project-tile">
<img class="project-pic" src="https://s16.directupload.net/images/190324/5ve5uh29.png"
alt="project">
<div class="project-title">Tribute Page</div>
</a>
</div>
<div id="contact" class="contact">
<a id="profile-link" href="https://www.freecodecamp.org/burakd" target="_blank" class="contact-details">FreeCodeCamp</a>
</div>
My CSS code
html,body {
text-align:center;
}
#welcome-section {
top: 0;
background: #ADD8E6;
min-height: 55vh;
padding-top: 45vh;
}
#navbar {
background: #ADD8E6;
position: fixed;
top: 0px;
width: 97%
}
nav ul {
text-align: right;
width: 100%;
background-color: #ADD8E6;
position: fixed;
}
nav ul li {
display: inline-block;
margin: 60px;
margin-bottom: 15px;
margin-top: 25px;
margin-left: 10px;
margin-right: 120px;
}