问题不在于如何解决这个问题，而在于问题的起因和取决于什么。
间隙的大小取决于容器中当前的字体大小。
下面是一个.container的字体大小为零的代码片段--您将看到元素彼此相对。
然后尝试将其更改为100 px，您将看到宽度变得相当大（虽然不是100 px）。
你代码中的容器没有特别定义的字体大小，所以它会选择默认的字体大小--通常是16 px。当然差距比16 px小得多，我相信这是为了适应字符的边缘，但我可能是错的，如果有人能对此发表评论，那就太好了。

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
  font-size: 2.5rem;
  margin-top: 0;
  font-weight: 100;
}

.container {
  background-color: rgba(12, 14, 24, 0.82);
  font-size: 0;
}

.yellow {
  background-color: rgba(255, 251, 2, 0.82);
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}

.pink {
  background-color: rgba(236, 2, 157, 0.68);
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}

.cyan {
  background-color: cyan;
  height: 300px;
  width: 10%;
  display: inline-block;
  box-sizing: border-box;
}

<div class="container">
  <div class="yellow">
    <h1>1</h1>
  </div>
  <div class="pink">
    <h1>2</h1>
  </div>
  <div class="cyan">
    <h1>3</h1>
  </div>
</div>

这是因为元素采用默认属性，如display:block;font-size属性使用display:flex;属性到主容器。或在font-size的变化，它将在差距的变化。我希望它会消除您的疑虑。谢谢。

body{
  margin:0;
  padding:0;
  box-sizing: border-box;
} 
h1 {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 2.5rem;
        margin-top: 0;
        font-weight: 100;
    }
    
    .container {
        display:flex;
        background-color: rgba(12, 14, 24, 0.82);
    }
    
    .yellow {
        background-color: rgba(255, 251, 2, 0.82);
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }
    
    .pink {
        background-color: rgba(236, 2, 157, 0.68);
        height: 300px;
        width: 10%;
        display: inline-block;
        
    }
    
    .cyan {
        background-color: cyan;
        height: 300px;
        width: 10%;
        display: inline-block;
        box-sizing: border-box;
    }

<div class="container">
    <div class="yellow">
        <h1>1</h1>
    </div>
    <div class="pink">
        <h1>2</h1>
    </div>
    <div class="cyan">
        <h1>3</h1>
    </div>
  </div>