Technical Documentation Page issues

HTML-CSS
1

I’m having a few problems with this project.

Originally, I had the first div object set up as

<nav id="navbar">

and the all of the a-links inside of it as:

<nav class="nav-link"><a href="#spot on page"></a></nav>

This made it so all the links fit nicely inside the bar itself, fitting length wise and one on top of the other, but the tests wouldn’t pass. So I removed the child nav’s and added the “nav-link” class to the a-links themselves. This caused a number of other issues which I sort-of fixed but the tests pass.

My question is:

Is there a way to make it so the links fit length wise and go on top of each other like before without the extra nav elements?

My code so far

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS armv7l 10575.58.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

2

w3schools nav say

Default CSS Settings

Most browsers will display the <nav> element with the following default values:

nav {
display: block;
}

by your description the problem is that <a> are inline elemnts not block, so try using

.nav-link{
  border-right: 1px solid;
  border-left: solid;
  border-top: 1px solid;
  border-bottom: solid;
  padding: 7px;
  display: block;
}

pen
pen1272×901 71.3 KB