Nav example horizontal scroll

[mfoitzik]

Describe the issue

I am referencing #394 for this issue. The nav component example shown in your documentation causes a horizontal scroll bar. The version of Pico I am using is the v2.0.6. The issue is caused by the negative margin you use on the ul's in the nav example:

nav ul:first-of-type {
  margin-left: calc(var(--pico-nav-element-spacing-horizontal) * -1);
}
nav ul:last-of-type {
  margin-right: calc(var(--pico-nav-element-spacing-horizontal) * -1);
}

I can easily override the two classes above by removing the * -1 and the problem goes away. However, your documentation actually describes and shows that this is a feature ("negative margins on childrens to provide a nice ::focus-visible style for links on keyboard navigation while keeping the content aligned horizontally")

I am wondering if I am missing something here or do not understand something.

Current Behavior

nav example causes horizontal scrollbar in browser

Expected Behavior

no horizontal scrollbar

Reproduction URL

Codepen with problem: https://codepen.io/mfoitzik/pen/QWRKQpd?editors=1000
Codepen with override fix added: https://codepen.io/mfoitzik/pen/ExzgQmp

Environment

I use Windows 10 and tried this in Firefox, Chrome and Edge

[dev-willis]

I am wondering if I am missing something here or do not understand something.

I have also wondered this. As you say, it's easy to fix but I don't understand why it's there in the first place.

[Sammy-T]

I added padding to the sides of the nav to get around this but I'm not understanding why there's an intentional overflow either.

[joshkoppang]

I believe I got around this by adding container-fluid to the header containing my nav.