I have a React component that is trying to simulate a progress bar. For simplicity sake, I've paired it down to the code-snippet below:

```css
.bar {
  background-color: #EAECEF;
  border: 1px solid #3D4D5B;
  height: 12px;
  width: 100%;
}

.progress {
  background-color: #3D4D5B;
  color: #000;
  height: 12px;
  width: 100%;
}
```

```html
<html>
<body>
  <div class="bar">
    <div class="progress"></div>
  </div>
</body>
</html>
```

The issue is that at certain resolutions, unwanted gaps start to appear between the inner div and the outer div. This can be shown by simply zooming in (ctrl-+) the rendered progress bar. I've only noticed this behavior with Chromium-based browsers and not with Firefox.

Does anyone know why this would be happening and/or have any suggestions on how to address this issue?