title: How to put images in a box without space
body: <p>I am learning HTML and CSS using bootstrap. </p>
  
  <p>I am studying carousel example code. But like the image, there's a space left in the box.</p>
  
  <p>How can I fill the box with full screen without space?</p>
  
  <p><a href="https://i.stack.imgur.com/2MTJR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2MTJR.png" alt="enter image description here"></a></p>
  
  <p>This is the carousel markup:</p>
  
  <pre><code>&lt;div class="col-lg-6 col-sm-6 portfolio-item"&gt;
      &lt;div class="card h-100"&gt;
          &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"&gt;
              &lt;div class="carousel-inner" role="listbox"&gt;
                &lt;!-- Slide One - Set the background image for this slide in the line below --&gt;
                &lt;div class="carousel-item active"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;img src="image/image-1.jpg" style="width: 100%; height: 100%;"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Slide Two - Set the background image for this slide in the line below --&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;img src="image/image-2.jpg" style="width: 100%"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- Slide Three - Set the background image for this slide in the line below --&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;div class="carousel-caption d-none d-md-block"&gt;
                    &lt;img src="image/image-3.jpg" style="width: 100%; height: 100%;"&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>i upload css code</p>
  
  <p>1.css </p>
  
  <pre><code>`body {
        background-image: url("../image/bgimage.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        }
  .carousel-item {
    height: 44vh;
    min-height: 300px;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
  </code></pre>
  
  <p>++other.css same project</p>
  
  <pre><code>.carousel-inner {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  
  .carousel-inner::after {
    display: block;
    clear: both;
    content: "";
  }
  
  .carousel-item {
    position: relative;
    display: none;
    float: left;
    width: 100%;
    margin-right: -100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out;
    transition: transform 0.6s ease-in-out, -webkit-transform 0.6s ease-in-out;
  }
  </code></pre>