position: fixed caused element to be wider than browser

Question

Can anyone tell me why position:fixed cause the element to be wider than the browser or other content on the page and causing horizontal scrolling?

Here is the code HTML

Answer 1

I was having a similar problem only on mobile. Despite having no margins, borders, padding on any of the parents, my fixed element was still wider than the viewport, and I didn't have the option of using width: auto.

If you're willing to not support IE8 and below, you can use

width: 100vw

Can I use Viewport units: vw, vh, vmin, vmax