title: Problem about bootstrap carousel resizing
body: <p>I am trying to resize a bootstarp 4 carousel.
  But after I done that. There are some white background left.</p>
  
  <p>I've tried making the background transparent, none. margin, border, padding to 0. box-shadow to none.</p>
  
  <p>Nothing helps.</p>
  
  <p>But if I add class "carousel-caption" aside of "carousel" or "float: left;" the white background will be gone.</p>
  
  <p>I wish to know if there is any other methods to fix this problem. And what is causing it.</p>
  
  <p>Codepen: <a href="https://codepen.io/kudratullah/pen/bmdNjp" rel="nofollow noreferrer">https://codepen.io/kudratullah/pen/bmdNjp</a> (The Codepen isn't belongs to me, but it shares the same problem of mine.)</p>
  
  <p>If you turned all the background colors to black, you can still sees the left/right side of the carousel will be still in white background.</p>
  
  <p>Screen Shot: <a href="https://i.stack.imgur.com/2jMjU.png" rel="nofollow noreferrer">Codepen</a></p>
  
  <p>My codes are at below:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="demo" class="carousel slide slider-horizontal" data-ride="carousel"&gt;
      &lt;ul class="carousel-indicators"&gt;
          &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#demo" data-slide-to="1" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#demo" data-slide-to="2" class="active"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="carousel-inner"&gt;
          &lt;div class="carousel-item active"&gt;
              &lt;img src="Picture.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img src="Picture.jpg"&gt;
          &lt;/div&gt;
          &lt;div class="carousel-item"&gt;
              &lt;img src="Picture.jpg"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
              &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
          &lt;/a&gt;
          &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
              &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
          &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.slider-horizontal
  {
      width: 60%;
      margin: auto;
  }
  .carousel-inner img
  {
      width: 100%;
  }
  </code></pre>
  
  <p>Many Thanks!!</p>