在使表格标题与滚动表格主体正确对齐时出现麻烦

Question

我正在使用Flask填充表格，但是很难对表格进行样式设置。我几乎可以从表中获得所需的功能，但标题对齐已关闭。由于某种原因，第四个标题与表格列相距较远，而其他标题则对齐。知道为什么会这样吗？

JSFIDDLE： https://jsfiddle.net/prime90/5k0njgmt/19/

HTML烧瓶：

<div class="container">
    <h1 class="header">Ownership</h1>
    <center><h4 class="title-name">13D/G Filings</h4></center>
        <table class="fixed" id='13D' style="width: 100%;">
            <thead>
                <tr>
                    <th>File Date</th>
                    <th>Form</th>
                    <th>Investor</th>
                    <th>Shares</th>
                </tr>
            </thead>
            <tbody style="width: 100%;">
                <tr>
                    {% for filing in ownership[0][0] %}    
                    <td>{{ filing['File_Date'] }}</td> 
                    <td>{{ filing['Form'] }}</td> 
                    <td>{{ filing['Investor'] }}</td> 
                    <td>{{ filing['Shares'] }}</td> 
                </tr>
                {% endfor %}   
            </tbody>
         </table>
</div>

CSS：

.fixed {
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed th {
  text-decoration: underline;
}
.fixed th,
.fixed td {
  padding: 5px;
  text-align: left;
  min-width: 100px;
}

.fixed thead {
  background-color: #3A3F44;
}
.fixed thead tr {
  display: block;
  position: relative;
}
.fixed tbody {
  display: block;
  overflow: auto;
  width: 100%;
  max-height: 500px;
  overflow-y: auto;
    overflow-x: hidden;
}