I can’t access container data

Question

I’m using ReactJS to set up a food page and I’m having trouble changing the properties of Container for CSS.

Here’s an example of how this in my project:

Where "1" is controlled by .ImgContainer:

.ImgContainer {
    height: 150px;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ImgContainer .Image {
    background-position: center;
    background-size: cover;
    height: 100%;
    width: 100%;
    transition: 0.2s;
}

.Body:hover .ImgContainer .Image {
    transform: scale(1.2);
}

the "2" by .teste:

.teste{
    border-radius: 25px;
    width: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
    margin-right: auto;
    margin-left: auto;
    background-color: #ee1414c5
}

and the "3" by .Body:

.Body {
    background-color: #ffffff;
    display: inline-block;
    padding: 0;
    border-radius: 8px;
    border-style: dashed;
    border-width: 1px;
    border-color: #a2de96;
    margin: 8px 32px 8px 0;
    width: 250px;
    overflow: hidden;
    transition: 0.2s;
}

I would like to remove this white part of "3" to leave as in the reference image:

But I’m not able to access this part of the container or edit it. What I’m doing wrong?

General structure of the code:

import React from 'react'
import { connect } from 'react-redux'

import * as actions from '../../../../../store/actions/actions'

import style from './item.module.css'

function Item(props) {
    const { name, desc, id, imgLink, price } = props
    const item = {
        id: id,
        name: name,
        price: price,
        desc: desc,
        imgLink: imgLink
    }
    return (
        <div className={style.Body}>
            <div className={style.ImgContainer}>
                <div className={style.Image} style={{ backgroundImage: `url(${imgLink})` }} />
            </div>
            <div className={style.teste} > 
                <span className="font-weight-light pt-2">
                    <p></p>
                    <strong>{name}</strong>
                </span>
                <br />
                <span className={`font-italic font-weight-lighter text-muted ${style.Description}`}>{desc}</span>
                <div className="row">
                    <div className={`mb-2 ${style.Row}`}>
                        <span className={`my-auto font-weight-light ${style.Price}`}>
                            <strong>€</strong> {price}
                        </span>
                        <div className={`my-auto ml-auto ${style.BtnHolder}`}>
                            <button className={style.ItemActionBtn} onClick={() => props.removeItemFromCart(item)}>
                                <i className="fa fa-minus" aria-hidden="true" />
                            </button>
                            <span className={`my-auto mx-1 font-weight-light ${style.Price}`}>
                                <strong> {id in props.itemMap ?
                                    props.cart[props.itemMap[id]].quantity : 0} </strong>
                            </span>
                            <button className={style.ItemActionBtn} onClick={() => props.addItemToCart(item)}>
                                <i className="fa fa-plus" aria-hidden="true" />
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

const mapStateToProps = state => ({
    cart: state.cart.cart,
    itemMap: state.cart.itemMap
})

const mapDispatchToProps = dispatch => ({
    addItemToCart: item => dispatch(actions.addItemToCart(item)),
    removeItemFromCart: item => dispatch(actions.removeItemFromCart(item)),
})

export default connect(mapStateToProps, mapDispatchToProps)(Item)