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

Question

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>

Please add your HTML and CSS inside a code snippet so we can run and spot the problem. — vmank, Sep 29 '20 at 09:10
@MaxiGui The problem is not reproducible with that code. It'll be good if OP cares to provide actual code and don't expect us to just make assumptions. — Omkar76, Sep 29 '20 at 09:19
Check whether or not your browser is adding padding to the main-container div. If so, just add `padding:0;` to your .main-container style — ATD, Sep 29 '20 at 09:27
Similar subject: https://stackoverflow.com/questions/44316234/1px-gap-of-absolute-positioned-element-with-transform-translate-on-safari-only — MaxiGui, Sep 29 '20 at 09:28
transform: translateX(-50%); creating this issue co you can use flex property for center align your content instead of translate — Aman, Sep 29 '20 at 09:31
Does this answer your question? [transform: translateY(-50%) causes 1px jump/shift in IE and EDGE](https://stackoverflow.com/questions/44117257/transform-translatey-50-causes-1px-jump-shift-in-ie-and-edge) — MaxiGui, Sep 29 '20 at 09:35

score 2 · Accepted Answer · answered Sep 29 '20 at 09:23

2

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;
}

answered Sep 29 '20 at 09:23

Christos Christou

192
4

1

This is happening because of the transform: translateX(-50%); it is well-known bug. – MaxiGui Sep 29 '20 at 09:39

score 0 · Answer 2 · answered Sep 29 '20 at 09:59

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>

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

2 Answers2