justify-contentがめいいっぱい右寄せになりません。

例にならって作成してますが，justify-contentを指定しても，少しは動くのですが，右端まで寄ってくれません。（Home,Menu,Acsess）
例はこちらです。

私が作成したものです。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>css cafe</title>
6  <link rel="stylesheet" href="css/html5reset-1.6.1.css">
7  <link rel="stylesheet" href="css/base.css">
8</head>
9<body id="home">
10  <!-- header begin -->
11  <header id="top">
12    <div class="header_content wrapper">
13      <h1><img class="header_logo" src="https://picsum.photos/100/90" alt="CSS Cafe"></h1>
14      <nav>
15        <ul>
16          <li class="current"><a href="index.html">Home</a></li>
17          <li><a href="#">Menu</a></li>
18          <li><a href="#">Access</a></li>
19        </ul>
20      </nav>
21    <div id="main_image"></div>
22    </div>
23  </header>
24  <!-- header end -->
25  <!-- contents begin -->
26  <div class="contents wrapper">
27    <!-- main begin -->
28    <main id="main_content">
29      <section id="info">
30      <h2>お知らせ</h2>
31      <dl>
32        <dt>2020/3/10</dt>
33        <dd>リニューアルオープンしました。</dd>
34        <dt>2020/4/15</dt>
35        <dd>4/27（金）は設備メンテナンスのため休業いたします。</dd>
36        <dt>2018/4/20</dt>
37        <dd>ゴールデンウィークは休まず営業いたします</dd>
38        <dt>2020/6/20</dt>
39        <dd>こだわりのパンに合わせたスペシャルデザートが登場</dd>
40        <dt>2020/7/10</dt>
41        <dd>営業時間の一部変更について</dd>
42      </dl>
43      </section>
44      <section id="campaign">
45      <h2>キャンペーン情報</h2>
46      <ul>
47        <li>日頃の感謝を込めて、パスタ全品がいつもよりお得に！</li>
48        <li>平日11時から14時までお得なランチタイムを実施中。</li>
49        <li>バイオリン演奏付きのスペシャルディナーイベントの早期予約受付中。</li>
50        <li>夏限定のスペシャルフルーツサンドを楽しもう！</li>
51      </ul> 
52      </section>
53    </main>
54    <!-- main end -->
55    <!-- sidebar begin -->
56    <aside id="sideber">
57      <ul>
58        <li><a href="#"><img src="https://picsum.photos/250/150" alt="季節のおすすめ商品はこちら"></a></li>
59        <li><a href="#"><img src="https://picsum.photos/250/150"alt="コーヒー豆の豆知識"></a></li>
60      </ul>   
61    </aside>
62    <!-- sidebar end -->
63  </div>
64  <!-- contents end -->
65  <!-- footer begin -->
66  <footer>
67    <ul>
68      <li><a href="index.html">ホーム</a></li>
69      <li><a href="#">商品情報</a></li>
70      <li><a href="#">店舗紹介</a></li>
71      <li><a href="#">アクセス</a></li>
72      <li><a href="#">会社情報</a></li>
73      <li><a href="#">お問い合わせ</a></li>
74    </ul>
75  
76  <small>&copy;2020 CSS Cafe</small>
77  </footer>
78  <!-- footer end -->
79
80</body>
81</html>

CSS
1@charset "utf-8";
2
3
4html {
5  font-size: 100%;
6}
7
8body {
9  font-family: "Hiragino Kaku Gothic proN","メイリオ",sans-serif;
10  color: #555;
11  line-height: 1.5;
12}
13
14img {
15  width:100%;
16}
17
18.wrapper {
19  max-width: 940px;
20  margin: 0 auto;
21  padding: 0 10px;
22}
23
24/* header */
25header {
26  border-top: 8px solid #8c6239;
27}
28
29.header_logo {
30  width: 90px;
31}
32
33.header_content {
34  display: flex;
35  align-items: center;
36  justify-content: space-between;
37  margin: 10px auto;
38}