スクロールボックスを中央に配置できない。

実現したいこと

スクロールボックスを中央に配置したい。

試してみたこと。

下記のURLを参考に

https://h110.info/html_box_size/

ｃｓｓのスタイルシートに
margin-left: auto;
margin-right: auto;
を追加してみても変化がありませんでした。

何か私のやり方が間違っているのでしょうか？Visual Studio CodeでGo Liveで観覧してみても、スクロールボックスが中央に配置されていません。

どうしたらよいでしょうか？途方に暮れています。ちなみにスクロールのつまみの色等はきちんと適応されています。

**画像も付属しておきます。**ボックス内の文字一部消しています。

環境
プログラミングソフトVisual Studio Code
windows10

html
1<!DOCTYPE html>
2 <html>
3 <head> 
4<meta charset ="utf-8"> 
5<link rel="stylesheet" href="kiyaku.css"> 
6<title></title> 
7
8
9</head>
10 <body>
11<form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false">
12<p></p>
13<div class="row">
14<label class="col-sm-2 control-label" for="name">名前：<?php echo $name; ?></label>
15</div>
16<p></p>
17<label class="title2" for="title2">利用規約</label>
18</div>
19<p></p>
20
21<div class="main">
22
23<p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br>
24すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p>
25
26<h4>第1条 (定義)</h4>
27
28 </div>
29
30</form> 
31<p><a href="form1.php?action=edit">入力画面へ戻る</a></p>
32 </body> 
33</html>

（◎◎kiyaku.css）

css
1/*スクロールのボックスの位置*/
2.main {
3	
4	margin-left: auto; /* 中央寄せにするため */
5	margin-right: auto; /* 中央寄せにするため */
6 }
7
8
9
10
11/*スクロール内のボックスの指定*/
12.main{
13    width:550px;
14    height:350px;
15    border: 2px solid #63e02d;
16    overflow: auto;
17    margin: 30px;
18    color: #63e02d;
19	
20
21}
22
23/*スクロールの幅の指定*/
24.main::-webkit-scrollbar{
25    width: 10px;
26    height: 10px;
27
28}
29/*スクロールの背景の指定*/
30.main::-webkit-scrollbar-track
31{
32    border-radius:5px;
33    box-shadow: 004px #63e02d;
34}
35/*スクロールのつまみ部分の指定*/
36.main::-webkit-scrollbar-thumb
37{
38    border-radius: 5px;
39    background: #63e02d;
40}
41