Why is max-width container inside 100vw container causing overflow?-CodePudding

I am trying to make a header, body, and footer component in React. In each component is an outer-container and an inner-container.

HTML

<div className="outer-container">
   <div className="inner-container">
      lorem ipsum...etc
   </div>
</div>

CSS

outer-container{
   width: 100vw;
   display: grid;
   justify-items: center;
}

inner-container{
   max-width: 1000px;
   width:100%;
}

The purpose is so that the inner container will cover and expand the full width of the browser until 1000px, then it will stop growing. This seems to work, but when I minimize to mobile view, I get a tiny bit of horizontal scrolling. Where is this overflowing coming from? I've removed all paddings and margins from body and tags.

When I set the outer-container width to 100%, the small gap disappears in mobile view, but now the outer-container and inner-container both stop at 1000px.

CodePudding user response：

inner-container{
   max-width: 1000px;
   width:100%;
   box-sizing: border-box;
}