html thとtdの頭が揃わないのは何でですか？

前提・実現したいこと

HTML＆CSSでサイト構築中なのですがthとtdの頭が揃いません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<div class="main-text">
2            <h1>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</h1>
3        </div>
4
5        <div class="main-content">
6            <table>
7                <tr>
8                    <th><a href="#">2018年9月1日</a></th>
9                    <td><a href="#"><strong>書くためのテーマ</strong></a><br><h6>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</h6></td>
10                </tr>
11
12                <tr>
13                    <th><a href="#">2018年3月5日</a></th>
14                    <td><a href="#"><strong>画像付きの投稿</strong></a><br><h6>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た</h6></td>
15                </tr>
16
17                <tr>
18                    <th><a href="#">2018年3月5日</a></th>
19                    <td><a href="#"><strong>引用付きの投稿</strong></a><br><h6>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た</h6></td>
20                </tr>
21
22                <tr>
23                    <th><a href="#">2018年3月5日</a></th>
24                    <td><a href="#"><strong>コメント付きの投稿</strong></a><br><h6>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た</h6></td>
25                </tr>
26
27                <tr>
28                    <th><a href="#">2018年3月3日</a></th>
29                    <td><a href="#"><strong>吾輩は猫である</strong></a><br><h6>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た</h6></td>
30                </tr>
31
32                <tr>
33                    <th><a href="#">2018年3月3日</a></th>
34                    <td><a href="#"><strong>名前はまだ無い。どこで生まれたかとんと見当がつかぬ。</strong></a><br><h6>吾輩は猫である。名前はまだ無い。どこで生まれたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た</h6></td>
35                </tr>
36            </table>
37        </div>

、、、CSS
.main-content table{
table-layout: fixed;
}

.main-content th a{
text-decoration: none;
color: black;
opacity: 0.5;
margin-right: 238px;
}

.main-content tr{
height: 186px;
}

.main-content th{
font-size: 15px;
white-space: nowrap;
}

.main-content td{
font-size: 20px;
}

.main-content h6{
opacity: 0.5;
}

.main-content td a{
text-decoration: none;
color: black;
}

.main-content td a:hover{
color: red;
}

.next-page a{
text-align: center;
text-decoration: none;
color: black;
border: 1px solid black;
opacity: 0.5;
padding: 17px 20px;
}
、、、
助けてください。お願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

頭ってどこかわからんけど
vertical-align: top;でいいんじゃない？

css
1.main-content th {
2  font-size: 15px;
3  white-space: nowrap;
4  vertical-align: top;
5}
6
7.main-content td {
8  font-size: 20px;
9  vertical-align: top;
10}