how to make header full width in react-CodePudding

I have created an header and i am trying to make its width 100% of the screen, but when i decrease the screen size it doesn't fit the screen(decreases the width). this is my css

 <Box
      style={{
        backgroundColor: "RGB(46, 180, 195)",
        height: "60px",
        padding: "12px",
        width:"100vw",            
        position: "sticky",
        top: 0,
      }}>

when screen size is normal it fits to screen but when i decreases the screen size it looks like this, i tried to give width is percentage also but no change.

CodePudding user response：

Add "width 100%" to all parents components which wrapped the Box component. Width: 100% means, the Box width is 100% in its "parent's size". If the Parent width is not 100% or 100vh, the Box component doesn't resize at all.