Gap between inline-block elements with whitespace: nowrap and overflow: scroll parent element

Question

I wanted to display a table (but I'm using div) that will scroll the overflow since the table is long. The problem I'm getting at is there's an unknown gap between my divs.

And here's the snippet: what's causing the unwanted gaps between columns (divs)?

.mobile-cross-reference {
  border: 1px solid #2980b9;
  color: #333;
  float: left;
  margin: 2%;
  width: 96%;
}
  
.m-grid-scroll {
  overflow-x: scroll;
}

.m-grid-header {
  background-color: #2980b9;
  color: white;
  text-align: center;
}

.m-grid-header,
.m-grid-row {
  float: left;
  width: 100%;
}

.m-grid-header-col {
  background-color: #2980b9 !important;
}

.m-grid-row-inline {
  background-color: transparent;
  display: inline-block;
  float: none;
  white-space: nowrap;
}

.m-grid-col {
  border-right: 1px solid #ccc;
  float: left;
  padding: 1% 0 1% 1%;
}

.m-grid-col:last-child {
  border-right: 0;
}

.m-grid-col3 {
  width: 31%;
}

.m-grid-inline {
  display: inline-block;
  float: none;
  margin: 0;
}

<div class="mobile-cross-reference m-grid-scroll">
      <div class="m-grid-header m-grid-row-inline">
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div>
      </div>
      <div class="m-grid-row m-grid-row-inline">
        <div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Murata</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div>
      </div>
    </div>

Answer 1

If anyone comes across this problem, there are two things to be said here.

1. As observed already there is something off with the markup. Sometimes when copying code from somewhere else, whitespace is not exactly whitespace and is actually rendered as a character. I am almost certain that this is the case here, just too lazy to copy the snippet and check.

2. Using font-size: 0 on the row element and font-size: <whatever-value-should-be> on the columns themselves fixes the issue without meddling with the HTML. This works because setting font-size to 0 on the row makes the "hidden characters" disappear completely - their font size is 0. The font-size should then be restored in the children since it (i.e. 0) is inherited.

Answer 2

Interestingly enough, the white space between the div tags. See the first columns.

.mobile-cross-reference {
  border: 1px solid #2980b9;
  color: #333;

}
  
.m-grid-scroll {
  overflow-x: scroll;
}

.m-grid-header {
  background-color: #2980b9;
  color: white;
  text-align: center;
}

.m-grid-header,
.m-grid-row {

  width: 100%;
  white-space:nowrap;
  display:block;
}

.m-grid-header-col {
  background-color: #2980b9 !important;
}

.m-grid-row-inline {
  background-color: transparent;
  white-space: nowrap;
}

.m-grid-col {
  border-right: 1px solid #ccc;
  padding:0px;
  margin:0px;

}

.m-grid-col:last-child {
  border-right: 0;
}

.m-grid-col3 {
  width: 31%;
}

.m-grid-inline {
  display: inline-block;

  margin: 0;
}

<div class="mobile-cross-reference m-grid-scroll">
      <div class="m-grid-header m-grid-row-inline"><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Bourns</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">BI Tech</div><div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Dale/Vishay</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Philips/Mepco</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Murata</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Panasonic</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Spectrol</div>
        <div class="m-grid-col m-grid-inline m-grid-col3 m-grid-header-col">Mil Spec</div>
      </div>
      <div class="m-grid-row m-grid-row-inline">
        <div class="m-grid-col m-grid-inline m-grid-col3">Bourns</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">BI Tech</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Dale/Vishay</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Philips/Mepco</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Murata</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Panasonic</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Spectrol</div>
        <div class="m-grid-col m-grid-inline m-grid-col3">Mil Spec</div>
      </div>
    </div>