Почему в React приложении header и footer при изменении ширины браузера/девайса обрезаются?

у меня есть header на всю ширину:

Хотел посмотреть как мое приложение выглядит на смартфоне и вот так почему-то уменьшается header:

С footer та же проблема....
html:
<div className="header"> </div>
с таким сss:

.header {
  overflow: hidden;
  background: green;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  width:100%;
}

В чем проблема? Как исправить? Только в React такую проблему встречал...