In my quest to achieve the grid layout illustrated in the image below https://i.sstatic.net/4hsjw.jpg
.col_1{
background-color: bisque !important;
height: 500px;
}
.col_2 {
width: 300px;
height: 287px;
background-position: center;
background-image: url('https://images.unsplash.com/photo-1633113218833-f0b9912cfe1c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80');
}
.col_3{
width: auto;
height: 280px;
background-color: blue;
/* margin: 0 !important; */
}
.col_4{
width: auto;
height: 300px;
background-color: yellowgreen;
}
.col_5{
width: auto;
height: 350px;
background-color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>"<br/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Practice 1</title>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7d70706b6c6b6d7e6f5f2a312e312c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111647f607f62">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-2">
<div class="row">
<div class="col-sm-4 col_1">
<div class="col col-sm-3 col_1"></div>
</div>
<div class="col-sm-8">
<div class="container-fluid">
<div class="row">
<div class="col col-md-6 col-md-2">
<div class="col col-sm-6 col_2"></div>
<div class="col col-sm-6 mt-2 col_3"></div>
</div>
<div class="col col-md-6">
<div class="col col-sm-6 col_4"></div>
<div class="col col-sm-6 mt-2 col_5"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Further investigation revealed a right margin on the column causing the whitespace, with the inspected webpage shown here: https://i.sstatic.net/ExH8q.png
Is there a solution to remedy this whitespace issue, or is using position relative and margin the only viable option?