删除3个HTML列之间的空格

Question

In the code below I have 3 col-md-4 that I want to reduce the space between to about 25px. I've tried reducing the margin between them along with increasing the padding on the left and right side of the first and last column respectively. The problem with this approach is that when the window size is manipulated it makes the image columns offset because of the increased padding.

HTML:

<div class="cards">
  <div class="container">
    <h2>
      Our Expertise.
    </h2>
  </div>
  <div class="row">
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
    <div class="col-md-4">
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
     <!-- <img> -->
    </div>
  </div>
</div>

CSS:

 html, body {
 margin: 0;
 padding: 0;
 font-family: 'Libre Baskerville', sans-serif;
 }

  .first    {
     padding-left: 200px !important;
  }

  .last {
    padding-right: 200px !important;
  }

  .container {
    max-width: 980px;
    margin: 0 auto;
  }

  .header   {
    padding-top: 20px;
  }

  .header h1    {
    font-size: 20px;
  }

  .nav li   {
    margin: 0px;
    border: 0px;
  }
  .nav li a {
    color: #333;
  }

  .jumbotron {
     background-color: transparent;
     padding-top: 100px;
     padding-bottom: 100px;

  }
  .jumbotron h2     {
     font-size: 50px;
  }
  .jumbotron h2 span    {
     color: #ffc200;
  }

  .banner {
     background-color: #333;
     height: 140px;
     color: white;
     text-align: center;
     padding-top: 30px;
  }

  .cards {
     background-color: #FFC200;
     text-align: center;
  }

  .cards img {
     margin-bottom: 25px;
     padding: auto;
  }

  .cards h2 {
     margin-top: 20px;
     margin-bottom: 80px; 
  }

  @media (max-width: 992px) {
     .col-md-4 {
     margin: 0 auto 0;
     text-align: center;
     width: 100%;
  }

  .cards img {
    width: 60%;
   } 
  }

@media (max-width: 500px) {
  .header h1 {
    text-align: center;
}

  .nav li {
    text-align: center;
    width: 100%;
}

  .cards img {
    width: 100%;
   }
 }

There are suppose to be images in the columns but because I don't have 10 rep points it wont let me post them.

Answer 1

Just change the default column padding. You need to keep the total space between the columns an even number, so 24 would be good, you would simply change the default column padding from 15px to 12px and override the negative margin on the row as well:

 .row { margin-left: -12px!important; margin-right: -12px!important; } div[class*='col-'] { padding-left: 12px; padding-right: 12px; } .inner { border:1px solid black; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="cards"> <div class="container"> <h2> Our Expertise. </h2> </div> <div class="row"> <div class="col-md-4"> <div class="inner">Column 1</div> </div> <div class="col-md-4"> <div class="inner">Column 2</div> </div> <div class="col-md-4"> <div class="inner">Column 3</div> </div> </div> </div>