html - 为什么这条轻微的红线保留在父容器中？

Question

细线没有消失，我已将子 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>

标签： htmlcsscss-position

Answer 1

嗨，解决此问题的最快方法是应用-1px 左侧的边距来覆盖它。

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