How to get rid of margin gaps between body columns in HTML (used css template but edited myself a lot)

Used a css template and edited, now between the 3 columns there is a small margin gap which id like to get rid of. tried readjusting the columun sizes but the margin gap still exists. Is there a more simple way I could have achieved the same page, if so how?? Yes im a newbie :P

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}


/* Style the header */

.header {
  background-color: #F1C40F;
  padding: 20px;
  text-align: center;
}


/* Style the footer */

.footer {
  background-color: #F1C40F;
  padding: 10px;
  text-align: center;
  /* Create three unequal columns that floats next to each other */
  .column {
    float: left;
    padding: 10px;
  }
  /* top, middle and bottom column */
  .columntopmiddlebottom {
    width: 30%;
  }
  /* Responsive layout - makes the three columns stack on top of each other 
    instead of next to each other */
  @media screen and (max-width: 600px) {
    .column.side,
    .column.middle {
      width: 100%;
    }
  }
  .auto-style2 {
    text-align: center;
  }
}

.auto-style2 {
  margin-top: 31px;
}

<div class="header">
  <h1>Header</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>

<div class="row" style="height: 717px">
  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
    style=" height: 211px>
    <h2>People</h2>
    <p style="height: 214px">1</p>
  </div>

  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
     style=" height: 212px>
    <h2 style="height: 21px">2</h2>
    <p style="height: 171px">info</p>
  </div>

  <div class="columntopmiddlebottom" style="background-color:#F7DC6F; 
     style=" height: 212px>
    <h2 style="height: 37px">3</h2>
    <p style="height: 193px">info</p>
  </div>
</div>

Gaps under and above each column appears, dont want the gaps.