Child div is shifted some pixels down and some pixels left from the parent. I am concerned about the class "yellow" that is child of class "red". Here is my code:
div{
width:100px;
height:100px;
border:solid 2px;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}<div class="red">red
<div class="yellow">yellow</div>
</div>
<div class="green">green</div>>Solution :
border:solid 2px; is the reason, here child div border width 2px is occupying space.
Replace border with an outline like below
div{
width:100px;
height:100px;
outline:solid 2px;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}<div class="red">red
<div class="yellow">yellow</div>
</div>
<div class="green">green</div>