Positioning elements inside bootstrap carousel - html

Question

I'm trying to put a down chevron to my carousel but the chevron appears outside of the carousel container. I want to have something like this :
http://www.yummygum.com
my HTML code:
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<img class="img-rounded" src="images/biz%20bznner.png" alt="First slide">
<div class="container ccontainers">
<div class="carousel-caption">
<h1 class="animated rubberBand 1">You have a project? Let Us Do it for you</h1>
<h3 class="animated bounceInLeft">We will do your projects with the best prices</h3>
<p><a class="btn btn-lg btn-primary animated shake 1" href="#" role="button">Sign up today</a></p>
</div>
</div>
</div>
</div>
<a class="chevron-down" href="#myCarousel" role="button">
<span class="glyphicon glyphicon-chevron-down" aria-hidden"true"></span>
</a>
</div>
my CSS:
.carousel-control.right, .carousel-control.left {
background-image: none;
}
.carousel .item {
height: 100vh;
margin-bottom: 60px;
}
.carousel {
height: 100vh;
width:100%;
}
.carousel-caption {
z-index: 10;
margin-top: 0%;
margin-bottom: 5%;
}
.carousel-caption h3 {
padding: 0.5em;
animation-delay: 0.5s;
}
.chevron-down{
**margin-bottom:100px** //THIS DOES NOT WORK
margin-left: 50%;
font-size: 30px;
}
.carousel-caption a{
background-color: orangered;
border-color: darkred;
margin-top: 1em;
animation-delay: 2s;
}
.carousel-caption h1 {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
font-weight: bold;
animation-delay: 0s;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 100vh;
}
so in the .chevron-down class margin left works but when I try to vertically move the chevron it does not do anything.. what is the correct way of doing this?

Answer 1

You can do something like this:
.chevron-down {
font-size: 30px;
position: relative;
bottom: 100px;
}
CODEPEN