How to add Bootstrap 5 padding uniformly across sides?

Question

I am trying to experiment with Bootstrap 5 within React, but somehow fail to understand the padding and margin. Consider the following code:

const Breadcrumbs = (props) => {

    return (
        <div className={"bg-dark rounded-start"}>
            <Breadcrumb>
                <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                <Breadcrumb.Item href="https://somelink.com">
                    Library
                </Breadcrumb.Item>
                <Breadcrumb.Item active>Data</Breadcrumb.Item>
            </Breadcrumb>
        </div>
    )
}

Its a Component which is later on shown in a Container. I chose a dark background to better show the issue. With this code, the Breadcrumbs render like this:

Now I want them to have some padding within the surrounding box, lets say only in vertical direction. According to the Spacing documentation I should be adding modifier classes, for example py-2 which should add a Padding to both top and bottom to $spacer * .5. When applying the additional class like this:

const Breadcrumbs = (props) => {

    return (
        <div className={"bg-dark py-2 rounded-start"}>
            <Breadcrumb>
                <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
                <Breadcrumb.Item href="https://somelink.com">
                    Library
                </Breadcrumb.Item>
                <Breadcrumb.Item active>Data</Breadcrumb.Item>
            </Breadcrumb>
        </div>
    )
}

It now looks like this:

My question now is: how can I add padding that keeps the Breacrumbs vertically centered within the surrounding div?

//Edit: I think I found something. The <ol> element created by Breadcrumb has a margin-bottom set. How can I remove that?