Border around nav links

Hello everyone, I am trying to add the final touches to my documentation page project but I have hit a road block. I need help adding a bottom border to my nav links, so far the border doesn’t seem to be stretching across the whole link. Here is a link to my code pen.

Just from using chrome dev tools it appears your div class=sidebar , as your parent container for your nav-links, is much bigger than its children nav-link widths. So when you put a border on the children nav-links, it appears ONLY to the extent that the children occupy the space in the parent div. SO maybe try increasing the nav-link width to be the same as the parent div class=sidebar ???

In fact, I see you have the nav-links inside a nav-bar. The nav-links width are set at 100%, BUT since they’re nested in the nav-bar , they only take 100% width of that nav-bar element, and not the div class=sidebar.
So I’d think that changing your nav-bar width to 100% as well should make the entire nav-bar occupy the parent div, and since your nav-links are already 100% of the nav-bar, they too should occupy the entire width of the div class=sidebar :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.