CSSで指定した画像幅が端まで表示されない

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
7    <link rel="stylesheet" href="../../tools/style/reset.css" />
8    <link rel="stylesheet" href="./assets/stylesheets/style.css" />
9    <title>pc-site</title>
10  </head>
11  <body>
12    <div class="wrapper">
13      <header class="header">
14        <div class="logo">
15          <img src="./assets/images/logo.png" class="header-logo" alt="ロゴ">
16        </div>
17        <nav>
18          <ul class="nav-list">
19            <li><a href="" class="nav-menu">home</a></li>
20            <li><a href="" class="nav-menu">about</a></li>
21            <li><a href="" class="nav-menu">access</a></li>
22            <li><a href="" class="nav-menu">contact</a></li>
23          </ul>
24        </nav>
25      </header>
26      <div class="hero"></div>
27      <main class="main"></main>
28    </div>
29  </body>
30</html>

CSS
1@charset "UTF-8";
2
3.wrapper {
4    width: 2000px;
5    background-color: #fffaf0;
6}
7
8.header {
9    display: flex;
10    justify-content: space-between;
11    align-items: center;
12}
13
14.header-logo {
15    width: 90px;
16    height: 90px;
17    margin: 20px 0px 20px 40px;
18}
19
20.nav-list {
21    display: flex;
22}
23
24.nav-menu {
25    margin-right: 80px;
26    font-size: 180%;
27}
28
29.hero {
30    background-image:url(../images/hero.jpg);
31    background-repeat:  no-repeat;
32    width: 100%;
33    height: 400px;
34}