WEBのレスポンシブデザインで画面幅を縮小した時に画面幅いっぱいに写真を表示するようにしたい

実現したいこと

模写しているサイトのように、画面幅を縮小した時に、DETAILのコーヒーの画像が画面幅いっぱいに縮小して表示されれるようにしたい。

模写しているサイト：https://code-step.com/demo/html/photo/

前提

CSSとHTMLの勉強のため、サイトを模写しています。
初心者です。

発生している問題・エラーメッセージ

エラーメッセージ
エラーメッセージはありません

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>Photobook</title>
7    <meta name="description" content="テキストテキストテキスト">
8    <meta name="viewport" content="width=device-width, initial-scale=1">
9    <link rel="shortcut icon" href="img/favicon.ico">
10    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
11    <link rel="stylesheet" href="css/style.css">
12</head>
13
14<body>
15    <div class="wrapper">
16        <header id="header">
17            <h1 class="site-title">
18                <a href="index.html"><img src="img/logo.svg" alt="photobook"></a>
19            </h1>
20        </header>
21
22    
23     <main>
24        <div id="mainvisual">
25            <img src="img/mainvisual.jpg" alt="山ともやの写真">
26        </div>
27
28        <section id="index">
29            <div class="inner">
30                <h2 class="section-title">INDEX</h2>
31                <ol class="index-list">
32                    <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
33                    <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
34                    <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
35                    <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
36                    <li>タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル</li>
37                </ol>
38            </div>
39        </section>
40
41        <section id="detail">
42            <div class="inner">
43                <h2 class="section-title">DETAIL</h2>
44                <div class="content">
45                    <img class="img" src="img/detail.jpg" alt="コーヒーの写真">
46                    <div class="text">
47                        <p class="title">タイトルタイトルタイトル</p>
48                        <dl>
49                            <dt>著者</dt>
50                            <dd>タイトルタイトルタイトル</dd>
51                            <dt>出版社</dt>
52                            <dd>タイトルタイトルタイトル</dd>
53                            <dt>発行年</dt>
54                            <dd>タイトルタイトルタイトル</dd>
55                        </dl>
56                        <p>
57                            テキストテキストテキストテキストテキストテキスト
58                            テキストテキストテキストテキストテキストテキスト
59                        </p>
60                        <a class="link" href="index.html" target="_blank"rel="noreferrer noopener">オンラインストアで見る</a>
61                    </div>
62                </div>
63            </div>
64        </section>
65     </main>
66    
67        <footer id="footer">
68            <p class="inner">&copy;2020 PHOTO BOOK</p>
69        </footer>
70    </div> 
71</body>
72
73</html>
74

CSS
1@charset "UTF-8";
2
3html{
4    font-size: 100%;
5}
6
7body{
8    font-size: 0.8rem;
9    color: #333;
10    background-color:rgb(234, 244, 253) ;
11}
12
13img{
14    max-width: 100%;
15}
16
17.wrapper{
18    max-width: 960px;
19    margin: 0 auto;
20}
21
22.inner{
23    max-width: 600px;
24    margin: 0 auto;
25}
26
27.section-title{
28    font-size: 1.2rem;
29    font-weight: bold;
30    margin-bottom: 10px;
31}
32
33/*--------------------------
34ヘッダー
35-------------------------*/
36#header{
37    margin-top: 60px;
38}
39
40#header .site-title {
41    width: 160px;
42    line-height: 1px;
43    margin-bottom: 15px;
44}
45
46#header .site-title a{
47    display: block;
48}
49
50/*--------------------------
51MainVisual
52-------------------------*/
53#mainvisual {
54    margin-bottom: 60px;
55}
56
57#mainvisual img{
58    height: 400px;
59    width: 960px;
60    object-fit: cover;
61}
62
63/*--------------------------
64Index
65-------------------------*/
66#index{
67    background-color: white;
68    margin-bottom: 60px;
69    padding: 30px 0;
70}
71
72.content{
73    text-align: left;
74    margin: 40px auto;
75    width: 600px;
76}
77
78#index .index-list{
79    margin-left: 20px;
80}
81
82#index .index-list li{
83    margin-bottom: 20px;
84}
85
86#index .index-list li:last-child{
87    margin-bottom: 0;
88}
89
90/*--------------------------
91Detail
92-------------------------*/
93#detail{
94    margin-bottom: 100px;
95}
96
97#detail .content{
98    display: flex;
99    align-items: flex-start;
100}
101
102#detail .content .title {
103    font-size: 1.1rem;
104    font-weight: bold;
105}
106/*PCとSPでFlexboxの動きが変わる時はメディアクエリを読み込む*/
107
108#detail .content .img{
109    width: 270px;
110    margin-right: 60px;
111}
112
113#detail .content dl{
114    display: flex;
115    flex-wrap: wrap;
116    padding: 16px 0;
117    margin-bottom: 25px;
118    border-top: solid 1px rgb(222, 222, 222);
119    border-bottom: solid 1px rgb(222, 222, 222);
120}
121
122#detail .content dt{
123    width: 25%;
124}
125
126#detail .content dd{
127    width: 75%;
128}
129
130#detail p{
131    margin-bottom: 20px;
132}
133
134#detail a{
135    color: #333;
136}
137
138#detail a:hover{
139    opacity: 0.8;
140}
141
142
143/*--------------------------
144Footer
145-------------------------*/
146#footer{
147    font-size: 0.7rem;
148    padding: 15px 0;
149}
150
151/*--------------------------
152SP
153-------------------------*/
154
155@media screen and (max-width: 960px) {
156    .wrapper {
157        padding: 0 40px;
158    }
159
160/*--------------------------
161ヘッダー
162-------------------------*/
163#header{
164    padding: 0 10px;
165}
166
167/*--------------------------
168MainVisual
169-------------------------*/
170#mainvisual{
171    padding: 0 10px;
172}
173
174
175/*--------------------------
176Detail
177-------------------------*/
178#detail .content{
179    flex-direction: column;
180}
181
182#detail .content .img {
183    width: 100%;
184    margin: 0 0 25px 0;
185}
186
187
188}

試したこと

模写しているサイトにソースコードが公開されていたため、自分のコードと見比べて真似してみましたが、写真の縮小がうまくいきません。
https://code-step.com/photo-code/

補足情報（FW/ツールのバージョンなど）

よろしくお願いします。

AbeTakashi

2023/02/16 11:07

「写真の縮小がうまくいきません。」が具体的にどう上手くいかないのかの説明がないと答える方も厳しいと思います。言葉で上手く説明できないならどういう状況かの画像を入れるなどして、「なにがどう上手くいかないのか」を質問文に追記されれば、アドバイスや回答が出やすくなると思います。参考） https://teratail.com/help/question-tips