HTML Bootstrap Carousel (carousel-control) - html

Question

About the issue that currently facing is that for Bootstrap Carousel (from w3school) , there is a problem for carousel-control.
Problem that i am facing is that when i have enter hyperlink for the image , the carousel-control are larger then the image itself (screenshot below).
Screenshot: https://prnt.sc/r4wh2f
Codes for my bootstrap carousel
<div class="row">
<div class="col-12 col-md-12 banner-section">
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<a href="facebook.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner01small.jpg">
<img src="image/banner01" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</div>
<div class="item">
<a href="instagram.com"><picture>
<source media="(max-width: 900px)" srcset="image/banner02small.jpg">
<img src="image/banner02" alt="banner" style="z-index:1" class="img-fluid">
</picture></a>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>

Answer 1

Hope this help you. Demo
Just Added CSS below mentioned code
a.carousel-control {
width: 30px;
height: 30px;
top: 47%;
}

Answer 2

This is because the controls are also using the anchor tag and is conflicting with the same.you can add additional css to control anchor tags of the carousal and it will work fine.
All the best :)