CODEWITHSUNDEEP
htmlcsscss-position
Gaurav Rajput
Gaurav Rajput

Reputation: 51

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

enter image description here

The slight line is not disappearing, I have set the child div to white and width of it to 50% but i dont know how to cover that red line on the left!

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>

Upvotes: 0

Views: 74

Answers (2)

Mehrzad Tejareh
Mehrzad Tejareh

Reputation: 633

I solved it but it can do with easier way. I did not make much change to save your codes.

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>

Upvotes: 0

Christos Christou
Christos Christou

Reputation: 192

Hi fastest way to fix this is to apply a margin left of -1px to cover that.

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

Upvotes: 2

Related Questions