How to add padding around a carousel - html

Question

So I added a carousel to my home page and it takes up the entire page and doesn't look good. I want to add some padding on all four sides, and I tried by using <div padding:25px> </div> but it doesn't work.
<div padding:25px>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-
slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-
slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>

Answer 1

Just add to the top :
<div style='padding:25px'>
It should work.

Answer 2

That is not how inline styles work.
You need to put the styles inside the style attribute like so:
<div style="padding: 25px;"></div>
By the way, inline styles are not recommended. You might want to put the styles in an external stylesheet and link that stylesheet with your HTML file.
Thank you.

Answer 3

Just wrap your code into a grid column and you're good to go.
<div class="col-12 col-md-10 col-xl-8 offset-xl-2 offset-md-1">
<div
id="carouselExampleFade"
class="carousel slide carousel-fade"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100" alt="..." />
</div>
</div>
<button
class="carousel-control-prev"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-
slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next"
type="button"
data-bs-target="#carouselExampleFade"
data-bs-
slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>