дочерний div выходит за пределы родительского div

Question

Я пытаюсь включить изображение и текст в элемент div. Но родительский div не полностью оборачивает изображение и текст. Я использую bootstrap -4 CDN для стилизации вместе с моими собственными стилями.

<div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <div class="parent_class mr-3">
                            <div class="single_prevention mb-4">
                                <div class="single_prevention_thumb mr-3">
                                    <img src="../assets/images/s1.png" alt="" srcset="">
                                </div>
                            </div>
                            <div class="single_prevention_content">
                                <h4>Coughing and sneezing</h4>
                                <p>Libero perspiciatis delectus, maxime, voluptatum minima name consectetur dolore</p>
                            </div>
                        </div>
                    </div>
                </div>

CSS

.parent_class{
    position: relative;
    height: 10em;

}
.single_prevention {
    background: #0B2C55;
    padding: 20px 10px 15px 0;
    border-radius: 5px;
    z-index:1;
    transition:.5s;
    position:relative;
}
.single_prevention::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 10%;
    background: #5fe60e;
    z-index: -1;
    border-radius: 5px;
    transition:.5s;
    opacity:0;
}
.single_prevention:hover::before{
    opacity:1;
    width: 100%;
}
.single_prevention_thumb {
    height: 100px;
    width: 100px;
    float: left;
    position: relative;
    margin-left: -40px;
}
.single_prevention_thumb img {
    float: left;
    width: 100%;
    border-radius: 100%;
}
.single_prevention_content h4 {
    color: #fff;
    margin-bottom: 10px;
}
.single_prevention_content p {
    color: rgba(255,255,255.80);
}

Ожидаемый результат:

My output:
div не закрывает изображение и текст

Я совершенно уверен, что это связано с div класса parent_class, но не могу это исправить. Пожалуйста, помогите мне решить эту проблему. Спасибо.

Answer 1

вам просто нужно заменить div single_prevention_content после single_prevention_thumb. пожалуйста, посмотрите добавленный код

    body{
        background-color: RED;
    }
.parent_class{
    position: relative;
    height: 10em;

}
.single_prevention {
    background: #0B2C55;
    padding: 20px 10px 15px 0;
    border-radius: 5px;
    z-index:1;
    transition:.5s;
    position:relative;
}
.single_prevention::before {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 10%;
    background: #5fe60e;
    z-index: -1;
    border-radius: 5px;
    transition:.5s;
    opacity:0;
}
.single_prevention:hover::before{
    opacity:1;
    width: 100%;
}
.single_prevention_thumb {
    height: 100px;
    width: 100px;
    float: left;
    position: relative;
    margin-left: -40px;
}
.single_prevention_thumb img {
    float: left;
    width: 100%;
    border-radius: 100%;
}
.single_prevention_content h4 {
    color: #fff;
    margin-bottom: 10px;
}
.single_prevention_content p {
    color: rgba(255,255,255.80);
}

    <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
            <div class="parent_class mr-3">
                <div class="single_prevention mb-4">
                    <div class="single_prevention_thumb mr-3">
                        <img src="https://f0.pngfuel.com/png/178/595/black-profile-icon-illustration-user-profile-computer-icons-login-user-avatars-png-clip-art.png" alt="" srcset="">
                    </div>                
                    <div class="single_prevention_content">
                        <h4>Coughing and sneezing</h4>
                        <p>Libero perspiciatis delectus, maxime, voluptatum minima name consectetur dolore</p>
                    </div>
                </div>

            </div>
        </div>
    </div>