Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dianne Rodriguez
Dianne Rodriguez
31 Points

Vertical navigation bar. Why are my hover states not filling the edge of my screen?

Hello, making my first vertical navigation bar, I'm trying to get my hover states to fill the left gaps, I have the hovers in black for right now. Here's a link to my code https://codepen.io/Eski1/pen/VbrKYV

1 Answer

Cory Harkins
Cory Harkins
16,500 Points
Cory Harkins
Cory Harkins
16,500 Points

What do you mean fill the left gaps? If you are referring to the margin you placed around your navigation bar, you have a 1px margin-left, until you remove that margin your nav, will still have a gap. Try this...

.navigation {margin-left:-8px;
             height:700px;
              width:140px;
              background-color:;
              font-family:monospace;
              font-size:2em;
              color:;
     }

I extended the width of your navigation bar, and pushed the navigation off the page by 8px to the left (x axis). There is another way too...

.navlist{border:solid;
    border-color:black;
    border-radius:0em .3em .3em 0em;
    height:800px;
    width:200px;
         display:block;
         margin-bottom:3px;
         padding-left:0px;
         padding-right:14px; }

Notice on the border-radius shorthand I left the top-left (first value) and the bottom left (last value) at 0. This squares off those edges, pushing them to the browser boundary, couple that with removing the navigation margin-left from 1px to 0px or -1px will remove any gaps, and make it look seamless.