margin doesnt update div size, it gets out of background. looks horrible-CodePudding

im learning to make a weather app. Im having problems adding a blur effect to the background, i've done it already but it turns out one of the 4child divs gets out of its parent-div width. heres how it looks

Horrible. why does this happen and how do i fix it? im 99% sure its because of margin, but i dont know what else to use since i asked a question earlier in SO regarding to how to add "space-between" to both right columns and most answers said "margin". in case you wanna see and make a correct answer to that question as well, here's that question But for now, please answer this one. Here's a JSFiddle with the code. Is there any way to make div-width dinamic and always increase its size when needed? Because that would be a gamechanger

 .containerStats{

    display: flex;
    position: absolute;
    bottom: 22px;  
    margin-left: 12px;
    width: 540px;
    padding: 10px;
    text-align: left;
    align-items: center;
    justify-content: space-around;
    backdrop-filter: blur(10px);
    border-radius: 10px; 
}

#windSpeedKM{

    margin-left: 4vw;
}

#humidityPorcentage{

    margin-left: 4vw;
}

CodePudding user response：

Remove width: 540px;

This way the container is free to resize according to child size. If you declare a width, the container will be fixed in size. You can also try different options like width: 100%; to get something more responsive.

If this answer helped you, please mark as accepted.

CodePudding user response：

Remove width: 540px; which by default allows the container to span the whole window