Table in div container with weird gap - html

Question

Hi there's this weird gap beside the td, when viewed at 375px. Which part causes this, and how do I get rid of it?
The table is inside a div with container class btw. Both the table and tr inherit 100% of the width (375.2px when viewed at that pixel), but for some reason the td only inherits 370.4 - there is a missing 4.8px.
HTML:
<div className="container container--margin--top container--font">
<table className="header__table--margin--btm">
<thead>
<tr>
<th className="text article__title">Article Title</th>
<th className="text snippet">Snippet (click to view article)</th>
</tr>
</thead>
</table>
<ArticleRow dataArray={dataArray} />
</div>
JS:
const ArticleRow = ({dataArray}) => {
const dataRow = dataArray.map(row => {
return (
<tr key={row.title}>
<td className="title">{row.title}</td>
<td className="content__div">
{row.content}
</td>
</tr>
);
});
return (
<table>
<tbody>
{dataRow}
</tbody>
</table>
);
}
CSS:
table {
border-collapse: separate;
border-spacing: 2px;
border-color: grey;
.title {
background: $title-bg;
color: $content-bg;
text-align: right;
width: 15.4rem;
padding-right: 1rem;
font: 500 2.1rem "Garamond", serif;
border: 1px solid rgba(39, 41, 50, 0.1);
}
.content__div {
//border: 1px solid rgba(250, 250, 250, 0.1);
}
.content {
display: block;
background: $content-bg;
color: $title-bg;
text-decoration: none;
padding: 1rem 1.5rem;
:hover {
text-decoration: none;
color: $title-bg;
opacity: 0.9;
}
}
}
#media (max-width: 550px) {
table .title {
padding-left: 0.4rem;
padding-right: 0.4rem;
width: auto;
}
.container {
padding: 0;
}
.container--margin--top {
margin-top: 1.5rem;
}
.article__title {
width: 9.8rem;
padding-right: 0.4rem;
text-align: inherit;
}
.search__bar {
width: 20rem;
}
}
#media (max-width: 376px) {
.title {
position: absolute;
margin-top: -2.8rem;
margin-left: 2px;
}
.container--margin--top {
margin-top: 1rem;
}
.header__table--margin--btm {
margin-bottom: 2.9rem;
}
tbody tr:not(:last-child) .content__div {
padding-bottom: 4rem;
}
}
https://github.com/helplah/react-wikipedia

Answer 1

I found the answer. The missing 4px originated from border-collapse: separate. Once I unset it, the gap disappears. I tested it on both firefox and chrome, it works on both browsers.