Why are the header and footer clipped when the browser/device width is changed in a React app?

Question

css

I have a full-width header:

I wanted to see how my application looks on a smartphone, and for some reason the header decreases:

The same problem with the footer ....
html: with this css:
<div className="header"> </div>

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

What is the problem? How to fix? I've only seen this problem in React...