Bootsrap Carousel Data-slide Arrows are under slide image - html

Question

I have a bootstrap carousel i am trying to add buttons/arrows to switch between slides I have assigned the position to be absolute, Its clickable and works but the arrows are under the image what could be the problem check here > link
Here is the code
#myCarousel .carousel-indicators {
position: absolute !important;
}
#media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#myCarousel .carousel-indicators {
bottom: -20px !important;
position: absolute !important;
}
#myCarousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#myCarousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
<div class="overlay">
<input class="btn btn-default" type="submit" name="submit" value="Order Cleaning" />
</div>
<div id="myCarousel" class="carousel slide" style="width:100%;height:auto">
<!-- 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>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" style="height:auto">
<div class="item active">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<div class="item">
<img src="images/test.png" class="img-responsive">
<div class="container">
<div class="carousel-caption">
</div>
</div>
</div>
<a data-slide="prev" href="#myCarousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#myCarousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>

Answer 1

You made mistake in your css
Check your 768px css you were give botton: -20px !important, change
This
#myCarousel .carousel-indicators {
bottom: -20px !important;
position:absolute !important;
}
To
#myCarousel .carousel-indicators {
bottom: 0px !important;
position:absolute !important;
}
EDIT
i see you are using icomoon css
So have to change this html
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="fa fa-chevron-left"></i>
</a>
<a data-slide="next" href="#myCarousel" class="right carousel-control">
<i class="fa fa-chevron-right"></i>
</a>
TO
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="icon-arrow-left"></i>
</a>
<a data-slide="prev" href="#myCarousel" class="left carousel-control">
<i class="icon-arrow-right"></i>
</a>
And give additional css
CSS
.left.carousel-control i {
position: absolute;
left: 10px;
top: 45%;
font-size: 35px;
}
.right.carousel-control i {
position: absolute;
right: 10px;
top: 45%;
font-size: 35px;
}
Output