中央を揃えたいです。

HTML、CSSでWebサイト作っているのですが、Safariでリロードすると、中央が揃わないのですがどこが違うのかわかりません。
どこが違うのか教えていただきたいです。

<!DOCTYPE html>
<html lang=ja dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="p-style.css">
  </head>
  <body>
      <h1 class="title" >ポケモン比較</h1>
      <nav>
        <ul class="col3">
  　　　　　<li class="title1">ヒトカゲ</li>
　　　　　  <li class="title2">フシギダネ</li>
  　　　　　<li class="title3">ミズゴロウ</li>
        </ul>
      </nav>
      <main>

      </main>
  </body>
</html>

body{
  background-color: white;
}
.title{
  margin-top: 20px;
  text-align: center;
	position: relative;
	padding: .3em;
  color:black;
}


.title::before,
.title::after {
	position: absolute;
	left: 0;
	content: '';
	width: 100%;
	height: 6px;
	box-sizing: border-box;
}
.title::before {
	top: 0;
	border-top: 2px solid red;
	border-bottom: 1px solid red;
}
.title::after {
	bottom: 0;
	border-top: 1px solid black;
	border-bottom: 2px solid black;
}
.col3 {
  display: flex;
  justify-content: center;
}

.col3 li {
  width: calc(100% / 3);
}

ul,
li {
  list-style: none;
}

li {
  text-align: center;
  padding: 20px 20px;
}

.title1{
    background-color: #ff6347;
    margin-right: 30px;
}

.title2{
    background-color: #3cb371;
}

.title3{
  background-color: #00a1e9;
  margin-right: 0;
}

Lhankor_Mhy

2021/11/02 07:18

Chrome や Firefox で確認すると中央に揃っている、という理解でいいでしょうか？

sumi.

2021/11/02 07:37

Chromeなどでは開いていません。 Safariでのみリロードしています。説明不足でした。

Lhankor_Mhy

2021/11/02 07:38

HTMLをご提示ください。

sumi.

2021/11/02 07:49

<!DOCTYPE html> <html lang=ja dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="p-style.css"> </head> <body> <h1 class="title" >ああああa<span>ポケモン比較</span></h1> <nav> <ul class="col3"> 　　　　　<li class="title1">ヒトカゲ</li> 　　　　　 <li class="title2">フシギダネ</li> 　　　　　<li class="title3">ミズゴロウ</li> </ul> </nav> <main> </main> </body> </html>

sumi.

2021/11/02 07:50

こちらです。すみません <!DOCTYPE html> <html lang=ja dir="ltr"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="p-style.css"> </head> <body> <h1 class="title" >ポケモン比較</h1> <nav> <ul class="col3"> 　　　　　<li class="title1">ヒトカゲ</li> 　　　　　 <li class="title2">フシギダネ</li> 　　　　　<li class="title3">ミズゴロウ</li> </ul> </nav> <main> </main> </body> </html>

Lhankor_Mhy

2021/11/02 07:56

そこはゼニガメだろ！それはそれとして、質問にご追記されることをおすすめします。

sumi.

2021/11/02 08:02

あえてミズゴロウにしてみました・・！追記しました。

Lhankor_Mhy

2021/11/02 08:02

あと、Safari を前面に押してると、「Safari の環境がないからなあ」という回答者が質問をスルーするので、回答が得られにくくなると思いますので、Safari が絶対条件でないならばタイトルや質問タグを変えた方が回答を得られると思います。

Lhankor_Mhy

2021/11/02 08:07 編集

ご提示のコードを試してみました。ヒトカゲの左に余白があることが問題ですか？