Лучший способ справиться с неправильно выровненным заголовком и главным образом из-за полосы прокрутки

Question

Я работаю над сайтом с заголовком вверху и основной областью содержимого. Заголовок не прокручивается, но основная область. Это означает, что у меня есть скроллбар справа от главной площади, но не в правой части заголовка, и они не выстраиваются в очередь:

На этом изображении красная полоса является содержание и оранжевый бар это центральная часть заголовка, которая должна соответствовать контенту.

Они оба выровнены с помощью этого CSS:

.center-content { 
    width: 100%; 
    max-width: 800px; 
    margin: 0 auto; 
} 

Каков наилучший подход для этого?

Я подумывал просто добавить полосу прокрутки навсегда, но я действительно не хочу этого делать. Затем я мог бы добавить несколько дополнений слева от основного раздела, чтобы повторно центрировать его. В качестве альтернативы я мог бы добавить отступ справа от заголовка.

Вопросы:

• Как изменить стиль заголовка на основе основной погоду секция имеет полосы прокрутки?
• Как бы добавить дополнение к основному разделу на основе того, что у него есть полоса прокрутки?
• Как получить ширину полосы прокрутки? это гарантированно должно быть одинаково во всех браузерах (мне нужно обслуживать мобильный телефон, а)

Я создал JSbin для этого, который демонстрирует проблему. Я использую таблицы стилей material-design-lite.

Answer 1

Вы не захотите изменять какие-либо стили на основе полосы прокрутки - я думаю, что это слишком сложно, и почти наверняка будет задействован javascript. Полосы прокрутки также не согласованы между браузерами/мобильными устройствами. Лучшим вариантом было бы исправить заголовок в верхней части страницы и сделать контент div margin-top равным высоте заголовка. Тогда полоса прокрутки, когда она появится, будет справа от всей страницы. Смотрите пример здесь:

http://output.jsbin.com/xuroyaceli/#

Изменение размера окна, чтобы увидеть, как это выглядит с скроллинга.