Bootstrap 4.4 carousel control buttons are in increct position - html

Question

I wrote a simple Carousel page based on the official documentation.
Reference link:
https://getbootstrap.com/docs/4.4/components/carousel/#with-controls
But the Carousel Control Button is not in the right position.
img1
img2
It seems the Carousel Control Button is in the vertical center of browser but not div element. How should I make it in vertical center of ?
My environment: Debian 10 / Bootstrap 4.4.1(installed by yarn)
here's my code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;">
***
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">***<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid px-0">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Answer 1

You have added arrows into .carousel-inner class. Hope now it will help you. if any changes please let me know.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<header>
<nav class="navbar navbar-expand-md navbar-light bg-white" style="z-index: 20;">
<div class="container d-flex">
<a class="navbar-brand" href="#">
<img src="http://lorempixel.com/output/nature-q-c-100-50-5.jpg" style="height: 3rem;"> ***
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav nav-pills ml-auto">
<li class="nav-item">
<a class="nav-link active" href="#">***<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">***</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-fluid px-0">
<div id="carouselControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://lorempixel.com/output/animals-q-c-1280-1024-8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="http://lorempixel.com/output/business-q-c-1280-1024-7.jpg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>