Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

jose macedo
jose macedo
6,041 Points

can you size your navigation list item right border

here is my code check it out

https://w.trhou.se/6f9qschqww

i wanted to size it to a percentage if its possible i got the idea off a template

5 Answers

nav li {  
  display: inline;  
  font-size: 18px;  
  margin: 0 auto;  
  border-right: 3vw solid transparent;  
  padding: 10px;  
  text-align: center;  
}  

obviously, you'll want to play with the values.

Just so I'm sure I understand the question, you only want to resize the border on the right side of the nav?

jose macedo
jose macedo
6,041 Points

yes of each of my list item anchors its a 1px solid black border

Do you want to create extra space to the right of each nav li when the browser window gets bigger?

jose macedo
jose macedo
6,041 Points

no i just want to make my navigation list items right border a bit smaller and maby add a shado i made some adjustments.

https://w.trhou.se/4z6sjwgc9b

Try setting the border in vw units. 1vw = 1% of viewport width.

Here's a link: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Does that seem like what you're looking for?

jose macedo
jose macedo
6,041 Points

well the height of them 4 . each of my list items has a right border but they are too tall

Maybe you could adjust the nav height in your CSS?