Putting Bootstrap Carousel indicator vertically at the right of the Carousel - css

Question

I am trying to change the Bootstrap Carousel indicator align to vertical and locate them in the right of the page.
As you can see at following demo (the demo is on Bootply, I am not sure why the indicators are still looks like horizontal at JS Fiddle).
Working Demo
As you can see from the demo I have set the right: 5%; on .carousel-indicators but thy are rendering almost at the middle of the Carousel! What am I doing wrong?
.carousel-indicators {
background-color:#000;
position: absolute;
bottom: 200px;
z-index: 15;
width: 30px;
margin-left: 20px;
list-style: none;
text-align: center;
right: 5%;
}
.carousel-indicators li{
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
}
.carousel-indicators .active {
width: 12px;
height: 12px;
margin-bottom: 10px;
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333333/333333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="http://placehold.it/1920x400/333/333" alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Answer 1

Left component is set to 50% in bootstrap css. you need to overrride it.
give your indicators left 95% that should fix your problem.
left:95%

Answer 2

set left:inherit because the lib has a default setting you must override.