I keep getting this error: :Your #navbar
element should always be at the top of the viewport. Whereas my code does have the navbar at the top
**
<title>My Portfolio</title>
<header>
<nav id="navbar">
<ul class="nav-list">
<li>
<a href="#welcome-section">About</a>
</li>
<li>
<a href="#projects">Work</a>
</li>
<li>
<a href="#skills">Skills</a>
</li>
</ul>
</nav>
My Personal Portfolio
</header>
<main>
<section id="welcome-section">
<h1>About Me</h1>
<p>
I consider myself to be ambivert, I can be either introverted or outgoing depending on my environment. Being around family and friends, going out, and watching movies and series are some of the things I enjoy doing in my spare time.
Skills
- - HTML
- - CSS
- - Laravel
Projects
Contact Me
Name: <label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<label for="message">Message:</label>
<textarea id="message" name="message"></textarea><br>
<input type="submit" value="Send">
<a
id="profile-link"
href="https://gitlab.com/"
target="_blank"
class="btn contact-details"
><i class="fab fa-github"></i> GitHub</a
>
</form>
</section>
</main>
<footer>
<p>Copyright © 2022. All rights reserved.</p>
</footer>
**
**body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
position: fixed;
background-color: #333;
color: #fff;
padding: 20px;
}
nav {
display: inline-block;
float: right;
margin-top: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-left: 20px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
section {
margin-bottom: 50px;
}
h2 {
font-size: 32px;
margin-bottom: 20px;
}
ul {
margin: 0;
padding: 0;
}
@media {max-width: 780px;}{
img {
width: 300px;
height: 300px;
}
}
navbar{
position: fixed;
width: 30%;
top: 0;
left: 0;
background-color: white;
color: black;
font-family: ‘Exo 2’, sans-serif;
padding: 1em;
}
**
WARNING
The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.
You will need to take an additional step here so the code you wrote presents in an easy to read format.
Please copy/paste all the editor code showing in the challenge from where you just linked.
Replace these two sentences with your copied code.
Please leave the ``` line above and the ``` line below,
because they allow your code to properly format in the post.
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36
Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage
Link to the challenge: