display: flex;を指定すると謎の余白ができた

1枚目の画像の左の紫の部分を消してサイドバーを左に詰めたいのですが、自分でいろいろ試してみても解決できませんでした。

display: flex;
justify-content: space-between;
を指定したので、要素が両端に配置されると思ったのですが、なぜか左にだけ余白ができます。

解決法を教えていただけますと幸いです。
以下にコードを貼ります。

HTML
1コード
2<!DOCTYPE html>
3<html lang="ja">
4    <head>
5      <meta charset="utf-8">
6      <title>Dental Clinic</title>
7      <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
8      <link href="css/style.css" rel="stylesheet">
9    </head>
10
11    <body>
12      <header>
13        <div class="header-nav">
14          <div class="header-logo">
15            <img src="siteTitle.png">
16          </div>
17          <ul>
18            <li><p>"地域に根付いた歯科医院"デンタル クリニック</p></li>
19            <li><p>03-0000-0000</p></li>
20            <li><p>予約受付時間 10:00～19:30 日祝 休診</p></li>
21          </ul>
22        </div>
23      </header>
24
25      <div class="main-nav">
26        <ul class="top-wrapper">
27            <li class="nav-left nav-contents"><a href="home.html">
28              <h2>トップページ</h2>
29              <p>HOME</p>
30            </a></li>
31            <li class="nav-contents"><a href="clinic.html">
32              <h2>医院紹介</h2>
33              <p>CLINIC</p>
34            </a></li>
35            <li class="nav-contents"><a href="service.html">
36              <h2>診療案内</h2>
37              <p>SERVICE</p>
38            </a></li>
39            <li class="nav-contents"><a href="staff.html">
40              <h2>院長・スタッフ紹介</h2>
41              <p>STAFF</p>
42            </a></li>
43            <li class="nav-right nav-contents"><a href="access.html">
44              <h2>アクセス</h2>
45              <p>ACCESS</p>
46            </a></li>
47       </ul>
48      </div>
49
50      <div class="contents-wrapper">
51        <div class="main-contents">
52          <img class="main-image" src="in01.jpg">
53          <div class="info-wrapper">
54            <h2>新着情報</h2>
55            <div class="info">
56              <p>2012年08月01日</p>
57              <p>【診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
58            </div>
59            <div class="info">
60              <p>2012年07月24日</p>
61              <p>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
62            </div>
63            <div class="info">
64              <p>2012年07月02日</p>
65              <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。</p>
66            </div>
67            <div class="info">
68              <p>2012年06月20日</p>
69              <p>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
70            </div>
71            <div class="info">
72              <p>2012年06月01日</p>
73              <p>ホームページをリニューアルしました。</p>
74            </div>
75          </div>
76        </div>
77
78        <div class="side-bar">
79          <div class="side-bar1">
80                <h2>一般歯科</h2>
81                <ul>
82                  <li>虫歯治療</li>
83                  <li>歯周病治療</li>
84                  <li>入れ歯</li>
85                  <li>予防歯科</li>
86                </ul>
87          </div>
88  
89          <div class="side-bar2">
90                <h2>審美歯科</h2>
91                <ul>
92                    <li>ホワイトニング</li>
93                    <li>オールセラミック</li>
94                    <li>セラミックインレー</li>
95                    <li>PMTC</li>
96                </ul>
97          </div>
98        </div>
99      </div>
100
101     
102   </body>
103</html>

CSS
1コード
2@charset "UTF-8";
3
4/* 共通部分 */
5html{
6  font-size: 100%;
7}
8a{
9  text-decoration: none;
10}
11img{
12  max-width: 100%;
13}
14body{
15  width: 1000px;
16  max-width: 100%;
17  margin: 0 auto;
18  padding: 0px 0 0;
19  background-color: #e2d9d96c;
20}
21
22/* ヘッダーナビ */
23.header-nav{
24  display: flex;
25  justify-content: space-between;
26  align-items: center;
27}
28.header-logo{
29  margin: 45px 0 30px ;
30}
31.header-nav li{
32  list-style: none;
33}
34.header-nav ul li p{
35  margin: 0;
36  padding: 0;
37}
38
39/* メインナビ */
40.top-wrapper li{
41  list-style: none;
42  text-align: center;
43  width: 15%;
44  margin: 0 auto;
45  background-color: #6cc6c4;
46  padding: 5px 25px;
47}
48.top-wrapper{
49  padding-left: 0;
50  display: flex;
51  justify-content: center;
52  width: 1000px;
53  max-width: 100%;
54  margin: 0 auto 30px;
55}
56.nav-left{
57  border-top-left-radius: 7px;
58  border-bottom-left-radius: 7px;
59}
60.nav-right{
61  border-top-right-radius: 7px;
62  border-bottom-right-radius: 7px;
63}
64.top-wrapper li h2{
65  font-size: 15px;
66  color: white;
67}
68.top-wrapper li p{
69  font-size: 13px;
70  color: white;
71}
72.nav-contents{
73  margin: 0 auto;
74}
75
76/* メインコンテンツ */
77.contents-wrapper{
78  margin: auto;
79  display: flex;
80  width: 100%;
81  height: 935px;
82}
83.contents-wrapper::after{
84  content: "";
85  display: block;
86  clear: both;
87}
88.main-contents{
89  width: 640px;
90  order: 2;
91}
92.main-image {
93  width: 640px;
94  height: 280px;
95  margin: 0 auto;
96}
97.info-wrapper{
98  background-color: white;
99  padding: 20px 20px 40px;
100}
101.info p{
102  display: block;
103}
104
105/* サイドバー */
106.side-bar{
107  order: 1;
108  width: 320px;
109}
110.side-bar1{
111  background-color: white;
112}
113.side-bar2{
114  background-color: white;
115}
116.side-bar h2{
117  margin: 0 ;
118}
119
120.contents-wrapper{
121  display: flex;
122  justify-content: space-between;
123}
124
125