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

<header>
     this is a header
</header>

<div class="container">
     this is a container
</div>

CSS

 header {
      width: 90%;
      height: 100px;
      background: blue;
      position: fixed;
      z-index: 100;
 }

.container {
     width: 90%;
     height: 500px;
     background: red;
     position: relative;
     z-index: -2;
}

Here is a link to the codepen http://codepen.io/colbydodson/pen/wcgua

Answer 1

Width is differently applied to relative and fixed elements, the ancestors margin and the style property that are parent-inheritable in respect to their position property.

The body tag will have it's default User Agent Style Sheet 8px margins (http://www.w3.org/TR/CSS2/sample.html),

header 90% width, being fixed, without any top, left, right or bottom value will be positioned to the nearest available place, but will inherit the original document/viewport size, making it in reality 90% wide, but positioned at the 10px 'body' margin offset. To test add top:0; left:0; for the fixed header http://jsbin.com/ETAqADu/1/edit

---

.container being a block-level DIV element set to relative position, will be 90% width of the available parent usable width, which is the body innerWidth (not counting the 10 + 10 px margins on the X axis)

Unwanted result:
logically header will be 20px wider than .container because position fixed moves your element out of body flow.

Fix:
control your parent (body) element default margin by setting to 0

body { margin: 0; }

Or a small but heavy CSS reset like:

/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }

Read also CSS Box Model - Margin collapsing

Answer 2

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