Why my 100vw element has a strange left gap? - css

Question

I have a box with three elements, and I also need a full-width of viewport element which place inside item 2
This is pen which show this problem https://codepen.io/in-in/pen/Nwxoar
I’m talking about the purple element (after), and I expect it to occupy the full-width of viewport but it has a strange left margin (41px)
.container {
width: 800px;
height: 100vh;
margin-left: auto;
margin-right: auto;
background-color: tan;
}
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 80px;
background-color: deeppink;
}
.box__item1 {
flex-basis: 200px;
background-color: dodgerblue;
}
.box__item2 {
position: relative;
flex-basis: 500px;
background-color: coral;
}
.box__item2::after {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100vw;
height: 100%;
margin-left: calc(50% - 50vw);
content: "after";
background-color: blueviolet;
outline: 1px solid red;
}
.box__item3 {
flex-basis: 100px;
background-color: seagreen;
}
<div class="container">
<div class="box">
<div class="box__item1"><span>item 1</span></div>
<div class="box__item2"><span>item 2</span></div>
<div class="box__item3"><span>item 3</span></div>
</div>
</div>

Answer 1

The .box__item2 element has a relative position. I moved the position property to the .container element and added a top: 80px and set the height: 80px forafter.
.container {
width: 800px;
height: 100vh;
margin-left: auto;
margin-right: auto;
background-color: tan;
position: relative;
}
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 80px;
background-color: deeppink;
}
.box__item1 {
-ms-flex-preferred-size: 200px;
flex-basis: 200px;
background-color: dodgerblue;
}
.box__item2 {
-ms-flex-preferred-size: 500px;
flex-basis: 500px;
background-color: coral;
}
.box__item2::after {
position: absolute;
top: 80px;
left: 0;
width: 100vw;
height: 80px;
margin-left: calc(50% - 50vw);
content: "after";
background-color: blueviolet;
outline: 1px solid red;
}
.box__item3 {
-ms-flex-preferred-size: 100px;
flex-basis: 100px;
background-color: seagreen;
}
<div class="container">
<div class="box">
<div class="box__item1"><span>item 1</span></div>
<div class="box__item2"><span>item 2</span></div>
<div class="box__item3"><span>item 3</span></div>
</div>
</div>
link: https://codepen.io/greensleeves/pen/gXrOQx