title: Element width: 100% out of screen
body: <p>I have a weird problem. I set my top menu to <code>width: 100%</code>, but while loading, it goes out of screen (to always 522px). <br></p>
  
  <p><strong>Debug</strong></p>
  
  <p>I stopped page load with <code>debugger;</code> in console. Element's computed width is 522px. Clicking on that brings me to css <code>width: 100%</code>. Everything in the page stays within page width except the menu.  <br></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#mobile_header {
      vertical-align: middle;
      position: fixed;
      background-color: #5d3026;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 50px;
      z-index: 99998;
      box-sizing: content-box;
  }
  </code></pre>
  
  <p><strong>Weird part</strong> <br>
  It goes out of bounds only while loading. Whenever page finishes loading, it goes to normal 100% of full screen size. No additional JS affect this. No CSS is loaded (after the page load pause). I've also deleted all the contents from within, changed ID in html and css (so really no scripts would affect it), cleared cache. Still goes to weird 522px (that is translated from 100%). <br>
  I know it's a wild shot, but does anyone has any guess of what could cause such a situation (on all browsers)? <br></p>
  
  <p><a href="https://i.stack.imgur.com/4WN8g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4WN8g.png" alt="enter image description here"></a></p>