How to stretch image across full width of screen bootstrap-CodePudding

I am banging my head against the wall trying to figure out how to stretch an image across a div using CSS and bootstrap. I tried making the div and parent container each fluid, which helped, but no matter what I do there is always some white space on the left and right sides of the image.

HTML

 <div >

    <div ></div>

    <div >
      <img src="Images/family-beach.jpg" alt="Family on the beach" >
    </div>

    <div ></div>

  </div>

CSS

.color-block-top {
  background-color: rgb(36,54,138);
  padding: 1vh;
  min-width: 20em;
}

.block {
  display: block;
  margin-left: auto;
  margin-right: auto;
  object-fit: fill;
  width: 100%;
}

.beach {
  margin: 0;
  min-width: 100%;
  height: 500px;
  object-fit: cover;
  overflow: hidden;
}

CodePudding user response：

You have to use the Bootstrap grid properly by adding col as children of row, then you can use spacing class utilities, in this case px-0 to container-fluid to remove the default padding of it.

And to remove gutters you can use gutters class utilities add gx-0 to rows

.color-block-top {
  background-color: rgb(36, 54, 138);
  height: 5vh
}
.beach {
  object-fit: cover;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css" rel="stylesheet">

<div >
  <div ></div>
  <div >
    <div >
      <img src="https://picsum.photos/500" alt="Family on the beach" >
    </div>
  </div>
  <div ></div>
</div>