为什么 parent 容器中会留下这条细细的红线？

Question

细线没有消失，我已经将child div设置为白色，宽度设置为50%，但我不知道如何遮盖左边的红线！

body{
  height: 100vh;
  position: relative;
}

.main-container{
  width: 70%;
  height: 50vh;
  background: red;
  /* below these styling are just for adjusting the element on the screen 
     for ease of styling & visibility change it for final usage */
  position: absolute;
  left: 50%;
  top: 15%;
  transform: translateX(-50%);
  /* till here */

}

.left {
width: 50%;
height: 100%  !important; 
background: white ;

}

<div class="main-container"><div class="left"></div></div>

Answer 1

您好，解决此问题的最快方法是在 -1px 的左边应用一个边距来覆盖它。

.left {
  width: 50%;
  height: 100%  !important;
  background: white;
  margin-left: -1px;
}

Answer 2

我解决了，但可以用更简单的方法解决。我没有做太多更改来保存您的代码。

body{
  height: 100vh;
  position: relative;
}

.main-container{
  width: 70%;
  height: 50vh;
  background: red;
  /* below these styling are just for adjusting the element on the screen 
     for ease of styling & visibility change it for final usage */
  position: absolute;
  left: 0;
  top: 15%;
  /* till here */
}

.left {
width: 50%;
height: 100%  !important; 
background: white ;
padding:0px
}

<div class="main-container"><div class="left"></div></div>

为什么 parent 容器中会留下这条细细的红线？

why does this slight red line remains in the parent container?

html

css

css-position