Hi, I have been trying to solve this problem a lot of time but I am unable to solve it.
Here is my Webpage:
https://codepen.io/Marathe07/pen/WNGKKNP?editors=1100
And also tell me the change, that I should do to make my site better.
And there is one more thing,
Whenever I try to click the About Page I see some green color too, but I should see the red color.
Please tell me how to solve this.
@alok.v.marathe, when a test fails click the red button to see which test(s) are failing and text to help you correct the issue. (Be sure and read more than just the first line of the failing message.)
In this case the failing message is;
The navbar should always be at the top of the viewport.
Navbar's parent should be body and it should be at the top of the viewport : expected 30 to be close to 0 +/- 15
AssertionError: Navbar's parent should be body and it should be at the top of the viewport : expected 30 to be close to 0 +/- 15
What is your navbarâs parent?
On a side note, codepen provides the boilerplate for you. It only expects the code youâd put within the body element in HTML. (No need to include the body tags). For anything you want to add to the <head> element click on the âSettingsâ button, then HTML and add it into the âStuff for <head>â box.
Mentioning because you have elements out of order. Links for a font would never be in the body element. Review this for an understanding of the HTML boilerplate tags.
Also to help, run your HTML code through the W3C validator.
And donât use in-line styling. Make all your styling external.
Thank you for your reply.
I made a huge change with the help of the W3C validator.
But I am still getting the error:
https://codepen.io/freeCodeCamp/pen/MJjpwO?editors=1100
And, even my order of the navigation links changed in the header.
The link you just shared is an empty test suite.
The original link for this post leads to a 404 error.
body must be the parent of the navbar.
You may have to remove these lines
<html lang="en">
<head>
<title>Portfolio project</title>
</head>
and
</html>
also add these lines to your css file
*{
margin:0;
padding:0;
box-shadow:border-box;
}
The problem is with the open space it had at the top side and bottom side of the navbar.
Thank you so much!!!
It worked.
But I couldnât understand this:
These help to remove the white spaces you have at the border of the viewport. It is a good practice. To avoid unwanted horizontal scrollbars.
Oh, ok.
Thanks again 
It looks like @krishnasai3cks beat me to punch for the answer 
But I am glad you figured out the answer.
Also this is called a basic css reset.
I would still remove the inline styles from your html code though.
<li><a style="float:right; display: block; padding:20px" class="flex-item" href="#welcome-section">About</a></li>
Okay.
Thank you !
Oh, so you mean removing the style tag from HTML and adding it to the CSS file right?
Yes, you need to remove the style attribute from your html and place it in the css section.
And the last thing I wanted to ask!
Is the webpage looking good?
If not, just tell me what should I change.
Donât give me the solutions.
After I do the corrections, please verify and tell me if I did it right or wrong. Ok?
Just for practice 
So sorry thereâs one more thing which I just noticed.
The navigation tags are totally opposite, to how I had arranged them.
For the nav links, I would personally ditch the floats and use flexbox instead.
You could review the flexbox lessons on how to do that but it is pretty easy with just a few lines of code.
I would also review the lesson on giving links meaningful text because âthis linkâ is not that accessible.
I would also make sure to review @Romaâs comments he gave you earlier.