Solution 1 :

Bootstrap’s grid system is based on 12 columns, so change your col-md-3 to col-md-4. Then if you need to remove the gap between the columns, add no-gutters to your row like:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<!--jquery easing plugin-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!--custom css---->



<div class="container">
  <div class="row no-gutters">
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
    <div class="col-md-4">
      <div class="card">
        lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      </div>
    </div>
  </div>
</div>

Solution 2 :

Why auto margin, try:

.col-md-3 {
	margin:0!important;
	padding:0!important;
}

Problem :

how to remove spacing between bootstrap columns ? bellow i have three bootstrap columns but whenever i try to remove space between them it is not working as it was expected

<!doctype html>
 <html lang="en">
  <head>
  <!-- Required meta tags -->
   <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
	   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
        <!--jquery easing plugin-->
		 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
		 <!--custom css---->
	     <link href="phcoding.css" type="text/css" rel="stylesheet">
          <title>delinahproducts</title>
		  <style>
		.col-md-3
{
	margin:auto!important;
	padding:0 !important;
}
		  </style>
           </head>
            <body>
<div class="container">
               <div class="row">
                <div class="col-md-3">
				<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
				</div>
				</div>
				<div class="col-md-3">
				<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
				</div>
				</div>
				<div class="col-md-3">
				<div class="card">
                lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
				</div>
				</div>
			

By