title: Trying to fix fixed empty space in columns WordPress site
body: <p>I am working on a Wordpress site which is using CSS. I have defined 4 columns and tried to use the negative margin or padding, which reduces the space between the columns (This is what I want to do, shown in image 2), however it doesn't make the website responsive. I think this happens because all columns have fixed width. Is there any way I can reduce the empty space in the one of the columns?</p>
  <p>Or maybe if I can reduce the width of one of the columns in Wordpress? <a href="https://i.stack.imgur.com/zziar.png" rel="nofollow noreferrer">image 1, shows the empty space in a column</a></p>
  <p><a href="https://i.stack.imgur.com/JqUOy.png" rel="nofollow noreferrer">Image 2, is what needs to be done while being responsive as well</a></p>
  <p>Here's the CSS used for the page:</p>
  <pre><code>   body {
      margin: 0;
  }
  
  .content {
      font-weight: 400;
      font-size: 16;
      line-height: 1.5;
      color: #525252;
  }
  
  .title {
      font-weight: 400;
      font-size: 32;
      line-height: 1.25;
      color: #161616;
  }
  
  .header {
      font-weight: 400;
      font-size: 20;
      line-height: 1.4;
  }
  
  .details-title {
      font-weight: 400;
      font-size: 12;
      line-height: 1.333;
      color: #525252;
  }
  
  .details-content {
      font-weight: 400;
      font-size: 14;
      line-height: 1.286;
      color: #161616;   
  }
  
  .caption {
      font-weight: 600;
      font-size: 12;
      line-height: 1.333;
      color: #525252;
  }
  
  .about-section {
      font-weight: 400;
      font-size: 16;
      line-height: 1.375;
      color: #161616;
  }
  
  .bx--text-area {
      height: 120px;
      overflow-y: hidden;
  }
  
  .bx--row {
    min-height: 50px;
  }
  
  .bx--tile {
      padding: 0;
      height: 74px;
      margin: 1rem;
  }
  
  .bx--tile__content {
      padding: 1rem 1.5rem 1.5rem;
  }
  
  .bx--tile__content h2 {
      color: #161616;
      font-size: 14px;
      font-weight: 600;
  }
  
  .bx--tile__content p {
      color: #525252;
      font-size: 14px;
      font-weight: 400;
      padding: .5rem 0 .75rem;
  }
  .space {
      margin-right: 2rem;
  }
  </code></pre>
  <p>And <a href="https://i.stack.imgur.com/3XAd0.png" rel="nofollow noreferrer">This is the Inspector View</a></p>
  <p>Thank you</p>