I tried to create with the HTML below, but it is not looking that great. the card used in the page give too much gap between them.
If you check my HTML you will see that the space is too wide
HOW CAN I MAKE THE GAPS BETWEEN EACH CARD TO APPEAR A BIT CLOSE?
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' />
<link rel="preconnect" href="https://fonts.gstatic.com"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@800&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Baloo+Tammudu+2:wght@500&display=swap" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.css" rel="stylesheet" />
<title></title>
<style>
.footerlinks {
color: #ffffff;
text-decoration: none !important;
}
.footerlinks:hover {
color: #ffd800;
}
#footer1 {
background: #762b00;
}
#footer2 {
background: #531f00;
}
</style>
</head>
<body style="background-color: #DCDCDC;">
<form id="form1" runat="server">
<div class="container" style="max-width: 100%;margin-top:5%;">
<div class="row" style="max-width: 100%;">
<div class="col-md-2 d-none d-sm-inline-block">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<h4>Publisher List</h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr/>
</div>
</div>
<div class="row">
<div class="col">
<asp:GridView class="table table-striped table-bordered" ID="GridView2" runat="server"></asp:GridView>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-7">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<h4>Publisher Details</h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<center>
<img width="100" src="imgs/publisher.png" />
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr/>
</div>
</div>
<div class="row">
<div class="col-md-4">
<label>Publisher ID</label>
<div class="form-group">
<div class="input-group">
<asp:TextBox CssClass="form-control" ID="TextBox1" runat="server" placeholder="ID"></asp:TextBox>
<asp:Button class="btn btn-primary" ID="Button1" runat="server" Text="Go" />
</div>
</div>
</div>
<div class="col-md-8">
<label>Publisher Name</label>
<div class="form-group">
<asp:TextBox CssClass="form-control" ID="TextBox2" runat="server" placeholder="Publisher Name"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<asp:Button ID="Button2" class="btn btn-lg btn-block btn-success" runat="server" Text="Add" />
</div>
<div class="col-4">
<asp:Button ID="Button3" class="btn btn-lg btn-block btn-warning" runat="server" Text="Update" />
</div>
<div class="col-4">
<asp:Button ID="Button4" class="btn btn-lg btn-block btn-danger" runat="server" Text="Delete" />
</div>
</div>
</div>
</div>
<a href="homepage.aspx"><< Back to Home</a><br/>
<br/>
</div>
<div class="col-md-3 d-none d-sm-inline-block">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col">
<center>
<h4>Publisher List</h4>
</center>
</div>
</div>
<div class="row">
<div class="col">
<hr/>
</div>
</div>
<div class="row">
<div class="col">
<asp:GridView class="table table-striped table-bordered" ID="GridView1" runat="server"></asp:GridView>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
