Why that div does that

Question

Hi guys, I'm learning css and I have a question about a code I was doing to practice animations.

The fact is that the div that I left with a background-color: white doesn't adapt to the div with opacity and I don't know why :{

https://code.sololearn.com/WSuY5XFkC3nm/?ref=app

Answer 1

Oh, well, the reason is (probably) because the margin of your inner div pushes it out of the bounds of the outer div. Try removing margins for the inner div, or set a lower width value for it, e.g.

.bar_general {
display: block;
position: absolute;
width: 92%;
bottom: 0%;
padding: 3%;
margin: 4%;
opacity: 0.8;
background-color: white;
}

Answer 2

What are you trying to achieve exactly? The inner div overwrites the background-color of the parent div, so it appears white. You also applied the opacity of the inner div, 0.8, which is working.

Answer 3

I put the white color only to see how my div is working, but the problem is what that div leaves the div with opacity.

I try to get the div(bg white) inside the div(w/ opacity) with its margins

(sorry my poor english)

Answer 4

Ohh thanks, the width with the margins need to complete 100%, so margins (4% + 4%) the div need to be 92%

Thanks💚