Ширина элемента: 100% из экрана

Question

У меня есть странная проблема. Я установил свое главное меню на width: 100%, но при загрузке он выходит из экрана (всегда 522px).

Debug

я остановил загрузку страницы с debugger; в консоли. Вычисленная ширина элемента равна 522px. Нажатие на это приводит меня к css width: 100%. Все на странице остается в пределах ширины страницы, кроме меню.

CSS

#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; 
} 

Weird часть
Это выходит за пределы только при загрузке. Всякий раз, когда страница заканчивает загрузку, она переходит в нормальный 100% от полного размера экрана. Никакое дополнительное JS не влияет на это. CSS не загружен (после паузы загрузки страницы). Я также удалил все содержимое изнутри, изменил идентификатор в html и css (так что на самом деле никаких скриптов не повлияло бы на него), очищенный кеш. Все еще идет к weird 522px (что переводится с 100%).
Я знаю, что это дикий выстрел, но разве кто-нибудь может предположить, что может вызвать такую ​​ситуацию (во всех браузерах)?

Answer 1

В итоге оказалось, что мой заголовок (отдельный файл с содержания) был еще один элемент со статической длиной (50em) и visibility:hidden так, как я смотрел на странице, я не мог найти ничего.
Заметил причину только после того, как она отделила весь файл заголовка.
Короче говоря, если width: 100% выходит из экрана, а родители - нормального размера, ДОСТОЙНЫЙ ДОЛЖЕН быть чем-то статическим размером в содержимом, растягивающем его. Тщательный поиск поможет.

Answer 2

fixed Для элементов, которые вы можете использовать left: 0 и right: 0 для ширины

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0; 
    left: 0; 
    right: 0; /* <= */ 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
} 

Answer 3

100% Вы meta viewport в вашем HTML для изменения масштаба в мобильных браузерах?

<meta name="viewport" content="width=device-width, initial-scale=1">