Change button position next to Carousel Bootstrap

By lowering the slide size appeared the following problem: The positioning of the "next" button is removed from the slide, as in the image below. I want it to be on the extreme side of the image, just like the left side button is. But all the attempts I've made have not resolved.

HTML:

<divid="carousel-cafe" class="carousel slide" data-ride="carousel">
    <div id="div-fig-cafe" class="carousel-inner" role="listbox">
        <figure class="item active">
            <img src="img/teste1.jpg" alt="Imagem 1">
            <figcaption class="carousel-caption">
                <p>Teste 1</p>
            </figcaption>
        </figure>               
        <figure class="item">
            <img src="img/teste2.jpg" alt="Imagem 2">
            <figcaption class="carousel-caption">
                <p>Teste 2</p>
            </figcaption>
        </figure>
    </div>

    <a class="left carousel-control" href="#carousel-cafe" 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-cafe" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

CSS:

#div-fig-cafe {
    width: 70%; /*Caso eu retire essa config, o botão se ajusta perfeitamente, porém o tamanho do slide aumenta muito*/
}