I'm new in HTML, CSS, and Bootstrap and I'm trying to create a carousel for my page.

The carousel is working, but the images are not fitting to the page. The size is too big (height and width) and I'm trying to fit but it's not working properly.

My codes are:

```css
.carousel-inner img{
 width:100%;
 height: 40%;
}
.carousel-caption {
  position: absolute;
 top: 60%;
  transform: translateY(-60%);
}
.carousel-caption h1{
font-size:470%;
text-transform: uppercase;
text-shadow:3px 3px 15px #000;
}
.carousel-caption h3{
  color:  #ffc107;
font-size: 200%;
font-weight: 500;
text-shadow: 3px 3px 10px #000;
padding-botton: 1rem;
}
```

```html
<!-- Image slider -->
    <div id="slides"  class="carousel slide" data-ride="carousel">
<ul class= "carousel-indicators">
  <li data-target= "#slides" data-slide-to= "0" class="active"></li>
    <li data-target= "#slides" data-slide-to= "1"></li>
      <li data-target= "#slides" data-slide-to= "2"></li>
</ul>
<div class="carousel-inner">
   <div class="carousel-item active">
  <img src="/home/susy/Desktop/GIT/vegan-/imagens/feijuca6.jpg">
  <div class="carousel-caption">
    <h1 class="display-2"> Have you ever tried?</h1>
    <h3> Discover the authentic flavour</h3>
    <br>
  <button type="button" class= "btn btn-outline-light btn-lg"> Click Here</button>
  </div>
    </div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/pudim.jpg">
</div>
<div class="carousel-item">
<img src="/home/susy/Desktop/GIT/vegan-/imagens/meal.jpg">
</div>
</div>
```

The first is the CSS (I'm using CSS 3) and the second is the HTML. I'm also using Bootstrap 4.

Does anyone know what am I missing or doing wrong? Or how can I change the sizes to fit the carousel? Please.