Provavelmente a largura das imagens são menores do que os `70%` que você definiu. Com isso ela não ocupa toda a largura da div, deixando um espaço à direita. Você pode resolver isso adicionando a classe `w-100` nas imagens, que irá adicionar a propriedade `width: 100%`, fazendo com que elas ocupem toda a largura da div. > Porém as imagens precisam ter uma resolução onde a largura seja no > mínimo do mesmo tamanho da largura da div, senão elas irão "estourar" > quando o CSS aumentá-las. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <div class="container clearfix" style="background-color: red;"> <div class="float-left" style="width: 70%;"> <div class="carousel slide carousel-fade" data-ride="carousel"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> </div> <div class="carousel-item"> <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> </div> <div class="carousel-item"> <img class="img-fluid w-100" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> </div> </div> </div> </div> <div class="float-right" style="width: 30%;"> <img class="img-fluid" src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg"> </div> </div> <!-- end snippet -->