Bootstrap carousel arrow positioning

Question

I'm left scratching my head on this. Currently, I have my arrows outside the tiles for my carousel. See Below:

How do I move the arrows down so they're right next to the outside of the indicators to the left and right like below without overlapping?

This web app populates different tiles depending on what users log in so it's important to keep the arrows adjusting based on how many carousel indicators populate per user.

HTML

<div id="{{ game_group }}-game-carousel" class="carousel slide">
<div class="test">
<div class="carousel-indicator-wrapper">

    <ol class="carousel-indicators">
        {% for obj in game_data %}
            <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 }}" class="{% if forloop.counter == 1 %}active{% endif %}"></li>
            {% if game_group != "NS" and forloop.last %}
                <li data-target="#{{ game_group }}-game-carousel" data-slide-to="{{ forloop.counter0 | add:"1" }}"></li>
            {% endif %}
        {% endfor %}
    </ol>

</div>
<a class="carousel-control left" href="#{{ game_group }}-game-carousel" data-slide="prev"><i class="icon-chevron-left" aria-hidden="true"></i></a>
<a class="carousel-control right" href="#{{ game_group }}-game-carousel" data-slide="next"><i class="icon-chevron-right" aria-hidden="true"></i></a>
</div>
</div>

CSS

#SL-game-carousel, #CL-game-carousel{
height: 425px;
margin-bottom:0px;
border:0px solid red;
}

#NS-game-carousel{
height:180px;
margin-bottom:0px;
border:0px solid red;
}

.carousel-indicator-wrapper{
  position:absolute;
  top:160px;
  z-index: 5;
  width:100%;
}

#lobby-tab-content .carousel-indicator-wrapper{
  top: 362px;
}

.carousel-indicators {
  position:relative;
  padding:0;
  /*use this display this to center the indicators horizontally*/
  display:table;
  margin:0 auto;
  top: 0px;
}

.carousel-indicators li {
background-color: rgba(223, 223, 223, 0.40);
border-radius: 5px;
height: 10px;
margin-left: 2px;
margin-right: 2px;
width: 10px;
cursor: pointer;
}

.carousel-indicators .active {
  background: rgb(255,255,255);
}

.test {
text-align: center;
}

.slot-carousel {
  width:640px;
  height:345px;
  /*background-color:rgba(255,0,0,.3);*/
  margin: 0 auto;
}

#NS-game-carousel .slot-carousel {
height:180px;
}

#lobby-tab-content #SL-game-carousel .carousel-control, #NS-game-carousel                 
.carousel-control, #CL-game-carousel .carousel-control {
  margin: /*178px 0px 0px 270px*/; 
  border-radius: 0;
  background-color:transparent;
  color: #dfdfdf;
  font-size: 38px;
  height: 40px;
  width: 40px;
  opacity: 1;
  filter: alpha(enabled='false');
  border:0;
  text-decoration: none;
}

#lobby-tab-content #SL-game-carousel .carousel-control.right, #NS-game-carousel .carousel-control.right, #CL-game-carousel .carousel-control.right {
  margin: /*178px 299px 0px 0px*/;
}

.icon-chevron-left:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}
.icon-chevron-right:hover {
    color: #d8d8d8 /*#cbcbcb*/;
}

#game-lobby #NS-game-carousel .carousel-control{
  margin-top:-27px;
}

#game-lobby #NS-game-carousel .carousel-control.right{
  margin-top:-24px;
}

.carousel-control.left {
    background-image: none !important;/*url('/static/images/arrow-left.png');*/
    background-position: 0px 0px;
    background-repeat: no-repeat;
}

.carousel-control.right {
    left: auto;
    right: 15px;
    background-image: none !important; /*url('/static/images/arrow-right.png')*/
    background-position:0px 0px;
    background-repeat:no-repeat;
}

Any help is gladly appreciated. Thanks!

Answer 1

try this:

.carousel-control {
    width: 30%;/*put your desired width*/
    margin-top: 150px;/*put your desired top margin*/
}