title: How to fully fit an image inside carousel(Bootstrap)
body: <p>I have made a fully functional carousel but the problem is that on the right side of carousel white block is appearing. I want to ged rid of that. Please help.</p>
  
  <p><img src="https://i.stack.imgur.com/ce71e.jpg" alt="Example"></p>
  
  <pre><code>&lt;div class="carousel-inner"&gt;
    &lt;div class="item active"&gt;
      &lt;img src="Jellyfish.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h2&gt;This is the heading&lt;/h2&gt;
        &lt;p&gt;This is paragraph&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="Koala.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h2 style="color:orange"&gt;This is the heading&lt;/h2&gt;
        &lt;p&gt;This is paragraph&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="item"&gt;
      &lt;img src="Penguins.jpg" alt="image"&gt;
      &lt;div class="carousel-caption"&gt;
        &lt;h2&gt;This is the heading&lt;/h2&gt;
        &lt;p&gt;This is paragraph&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
      &lt;a href="#caro" class="left carousel-control" data-slide="prev"&gt;
        &lt;span class="glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a href="#caro" class="right carousel-control" data-slide="next"&gt;
        &lt;span class="glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>