Need help with Technical Documentation Page

HTML-CSS
1

Hi,

I am almost done with the FCC Technical Documentation Page. However, I am struggling with the formatting of my navigation bar. Specifically, I cannot seem to get the top and bottom border for each of the links on the navigation bar to stretch all the way to the left. Also, the right border of my navbar also does not stretch all the way to the bottom of the page (this issue is only apparent during ‘full page view’). Could someone pls teach me how to resolve these 2 problems? Many thanks in advance!

Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Greetings @GremlinSW,

Is this what you’re looking for?

image
image315×813 10.7 KB

Lists, by default, come with predefined padding.

You need to remove it by doing:

nav ul {
  padding: 0;
}

Then, add the padding to the list items, not the list itself:

nav li {
  padding-left: 20px;
}

You can also set the right border to go all the way to the bottom by applying a height to the nav:

nav {
  height: 100vh;
}
3

Dear @Queryeleison,

Thank you so much for your help! I did what you advised and got everything to work! I was stuck here for very long and really appreciate your help!

Many thanks once again and I wish you a great weekend ahead!

Regards,
SW