Change the position of the button next to Carousel Bootstrap

Question

When decreasing the size of the slide appeared the following problem: The positioning of the "next" button is away from the slide, as in the image below. I want it to be on the far side of the image, the same way the button on the left is. But all the attempts I’ve made haven’t solved.

HTML:

<div id="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*/
}

Answer 1

The slide is responsive, so it will take up the space you have available.

Place the slide inside a container or inside a container col-, this way it will follow the size you indicate the element "parent".