why this image is not full sized?

/* Header */

.header {
  background: url('https://picsum.photos/1920/1080') center center no-repeat;
  background-size: cover;
}

.header .header-content {
  padding-top: 15.5rem;
  text-align: left;
}

.header .text-container {
  margin-top: 3rem;
  margin-bottom: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<div id="content">

  <!-- start of header -->
  <header id="header" class="header">
    <div class="header-content"> //here give an class of that image
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <div class="text-container">
              <h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
              <p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
              <a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
            </div>
            <!-- end of text-container -->
          </div>
          <!-- end of col -->
          <div class="col-lg-6">
            <div class="image-container">
              <img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
            </div>
            <!-- end of image-container -->
          </div>
          <!-- end of col -->
        </div>
        <!-- end of row -->
      </div>
      <!-- end of container -->
    </div>
    <!-- end of header-content -->
  </header>
  <!-- end of header -->

</div>