display:flex;を使うと正体不明の余白ができてしまったので助けてほしいです><

前提

リストをdisplay:flex;とjustify-content:space-between;をつかって横並びにした際、左端に正体不明の空白ができてしまい困っています。どうしたら左に余白がなく等間隔に並べることができるか教えていただきたいです。下に画像とコードを載せます。

HTML
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>起業ホームページ</title>
8    <meta name="description" content="#">
9    <link rel="stylesheet" href="style.css">
10</head>
11<body>
12    <header id="header" class="wrapper">
13        <h1>予備校</h1>
14        <ul>
15            <li><a href="">トップ</a></li>
16            <li><a href="">トピックス</a></li>
17            <li><a href="">事業内容</a></li>
18            <li><a href="">事業紹介</a></li>
19            <li><a href="">アクセス</a></li>
20            <li><a href="">お知らせ</a></li>
21        </ul>
22    </header>
23    <main id="main" class="wrapper">
24        <div class="mainvisual">
25            <img decoding="async" src="img/mainvisual.jpg" alt="てっすぃー予備校の写真">
26        </div>
27        <div class="content">
28            <h1 class="content-title">事業内容</h1>
29            <ul>
30                <li><img decoding="async" src="" alt="事業内容１">
31                    <h2>事業内容１</h2>
32                    <p>説明</p>
33                </li>
34                <li><img decoding="async" src="" alt="事業内容２">
35                    <h2>事業内容２</h2>
36                    <p>説明</p>
37                </li>
38                <li><img decoding="async" src="" alt="事業内容３">
39                    <h2>事業内容３</h2>
40                    <p>説明</p>
41                </li>
42            </ul>
43        </div>
44
45    </main>
46
47    
48</body>
49</html>
50
51
52
53```CSS
54コード
55```@charset "UTF-8";
56
57
58li{
59    list-style:none;
60}
61
62a{
63    text-decoration:none;
64    color:#333;
65}
66img{
67    max-width:100%;
68}
69
70html{
71    font-size:100%;
72}
73
74body{
75    font-family:'Hiragino Kaku Gothic Pro','Meiryo','sans-serif';
76    font-size:0.9rem;
77}
78
79.wrapper{
80    max-width:960px;
81    margin:0 auto 30px auto;
82    text-align:center;
83}
84
85#header ul{
86    display:flex;
87    justify-content:space-between;
88}
89#header ul li{
90    flex-grow:1;
91}
92#header ul li+li{
93    border-left:1px solid #ddd;
94}
95#header a{
96    display:block;
97}
98
99#main .mainvisual img{
100    width:100%;
101    height:400px;
102    object-fit:cover;
103}
104#main .content ul{
105    background-color:#ddd;
106    display:flex;
107    justify-content:space-between;
108}
109
110