https://i.sstatic.net/U3dyK.png
How can I get rid of the red line on the left side that is not disappearing, even though I've set the child div to white with a width of 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>