Bootstrap 4.1.1 CSS carousel slider arrows alignment - css

Question

How can i arrange the carousel control arrows from left and right end of screen in Bootstrap 4.1.1?
I tried following code but didn't work.
.carousel-control .icon-prev{
left: 5px
}
.carousel-control .icon-next{
right: 5px
}
This is my HTML code for the carousal.
<div id="slider3" class="carousel slide mb-5 carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li class="active" data-target="#slider3" data-slide-to="0"></li>
<li data-target="#slider3" data-slide-to="1"></li>
<li data-target="#slider3" data-slide-to="2"></li>
<li data-target="#slider3" data-slide-to="3"></li>
<li data-target="#slider3" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/car1.jpg" alt="First Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Second Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Third Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car2.jpg" alt="Fourth Slide">
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/car3.jpg" alt="Fifth Slide">
</div>
</div>
<!-- CONTROLS -->
<a href="#slider3" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#slider3" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Answer 1

Try with following code, your current approach is also not bad but expensive indeed:
.carousel-control-next,
.carousel-control-prev {
width:20px;
}
Explanation: You trying adjust inside element of next prev buttons. But button is icon container which had flex with align-items:center, that's why it is not applying your .carousel-control .icon-prev positions.