画面を縮小したときにh2の文字位置が動くため、固定したい。

前提・実現したいこと

画面を縮小すると、h2の文字が中央に向かってうごいてしまいます。
同じ場所に固定する方法を知りたいです。

該当のソースコード

↓html↓

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>※※※</title> <link rel="stylesheet" href="css/styles.css"> </head>  <body> <div> <h1>※※※</h1> </div> <div> <h2 id="relative">※※※</h2> </div> <div> <table border="1" align="center" style="border-collapse: collapse" > <thead> <tr> <th width="270px">※※※</th> <th width="930px">※※※</th> </tr> </thead> <tbody> 　<tr> <td><a href="※※※">GLTD</a></td> <td>\※※※</td> </tr> <tr> <td><a href="※※※k">※※※</a></td> <td>\※※※</td> </tr> <tr> <td height="50px"><a href="※※※">※※※</a></td> <td>\※※※</td> </tr> <tr> <td><a href="※※※">※※※</a></td> <td>\※※※</td> </tr> </tbody> </table> </div> </body>  <body> <h2 id="relative">※※※</h2> <table border="1" align="center" style="border-collapse: collapse"> <thead> <tr> <th width="270px">※※※</th> <th width="930px">※※※</th> </tr>

</thead>
<tbody>
　<tr>
    <td><a href="※※※">※※※</a></td> 
    <td>\※※※</td>  
</tr>
<tr>
    <td height="50px"><a href="※※※>※※※</a></td> 
    <td>\※※※</td>  
</tr>
<tr>
    <td height="50px"><a href="※※※">※※※</a></td> 
    <td>\※※※険</td>  
</tr>
<tr>
    <td height="50px"><a href="※※※" target="blank">※※※</a></td> 
    <td>\※※※</td>  
</tr>
</tbody>

</table> </body>  <body> <h2 id="relative">※※※</h2> <table border="1" align="center" style="border-collapse: collapse"> <thead> <tr> <th width="270px">※※※</th> <th width="930px">※※※</th> </tr>

    </thead>
    <tbody>
    　<tr>
        <td height="50px"><a href="※※※" target="blank">※※※</a></td> 
        <td>\※※※</td>  
    </tr>
    </tbody>
</table>
</body>

※※※

    </thead>
    <tbody>
    　<tr>
        <td height="50px"><a href="※※※">※※※</a></td> 
        <td>\※※※</td>  
    </tr>
    </tbody>
</table>

</body> </html>

↓CSS↓
body {
max-width: 1250px;
margin: auto;
}

h1 {
text-align: center;
}

#relative {
position: relative;
padding-left: 14%;
margin-bottom: -20px;
margin-right: 180px;
overflow: auto;
}

table th {
padding: 10px;
background: skyblue;
}

table td {
text-align: left;

}

table {
width: 900px;
}

試したこと

position: relative; かと思ったのですが、入力するも反応ありませんでした。

補足情報（FW/ツールのバージョンなど）

諸事情によりURLなどは伏せさせていただいております。

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

回答1件

ベストアンサー

とりあえず、テーブルとサイズを合わせるのが手っ取り早そうです。

css
1#relative {
2	position: relative;
3	/* padding-left: 14%;
4	margin-bottom: -20px;
5	margin-right: 180px; */
6	overflow: auto;
7	margin: 0 auto;
8	max-width: 900px;
9}