レスポンシブにしたときに設定した余白を消したい

サイトの模写を練習しています。
bodyに左右のマージンを設定しているのですが、
レスポンシブにしたときにメインのイメージだけは画面いっぱいに広がるようにしたい場合、
どのようにしたらよいでしょうか？

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">
6  <title>Write-書くためのテーマ</title>
7  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10<body>
11<header>
12
13  <div class="container">
14    <div class="title">
15      <h1><a class="logo" href="index.html">Write</a></h1>
16      <p>書くためのテーマ</p>
17    </div>
18
19    <div class="nav">
20      <ul>
21        <li><a href="">ホーム</a></li>
22        <li><a href="">ページ</a></li>
23        <li><a href="">タイポグラフィー</a></li>
24        <li><a href="">お問い合わせ</a></li>
25        
26      </ul>
27    </div>
28
29    <div class="search-icon">
30      <span class="fa fa-search"></span>
31    </div>
32
33  </div>
34
35</header>
36
37<main>
38  <div class="main-image">
39    <img src="img/top.jpg">
40    <h1>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限までは省いたデザインは、あなたの文章を主役にします。</h1>
41  </div>
42
43  <div class="wrapper">
44    <div class="section">
45      <div class="date">
46        <p>2018年9月1日</p>
47      </div>
48      <div class="info">
49       <p><a href="">書くためのテーマ</a></p>
50       <p>Writeは文章を書く人のためのミニマルなWordPressテーマです。装飾を極限まで省いたデザインは、あなたの文章を主役にします。</p>
51     </div>
52   </div>  
53    
54     <div class="section">
55       <div class="date">
56         <p>2018年3月5日</p>
57       </div>
58       <div class="info">
59        <p><a href="">画像付きの投稿</a></p>
60        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。</p>
61       </div>
62    </div>
63
64     <div class="section">
65       <div class="date">
66         <p>2018年3月5日</p>
67       </div>
68       <div class="info">
69        <p><a href="">引用付きの投稿</a></p>
70        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
71       </div>
72     </div> 
73      
74     <div class="section">
75       <div class="date">
76         <p>2018年3月5日</p>
77       </div>
78       <div class="info">
79        <p><a href="">コメント付きの投稿</a></p>
80        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…。</p>
81      </div>
82    </div> 
83
84     <div class="section">
85       <div class="date">
86         <p>2018年3月3日</p>
87       </div>
88       <div class="info">
89        <p><a href="">吾輩は猫である</a></p>
90        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
91      </div>
92    </div>  
93
94     <div class="section">
95       <div class="date">
96         <p>2018年9月1日</p>
97       </div>
98       <div class="info">
99        <p><a href="">名前はまだ無い。どこで生れたかとんと見当がつかぬ。</a></p>
100        <p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれ…</p>
101      </div>
102    </div>  
103
104
105 </div>
106
107 <div class="page">
108  <ul>
109    <li class="number"><a href="">1</li></a>
110    <li class="number"><a href="">2</li></a>
111    <li class="number"><a href="">3</li></a> 
112    <li class="number"><a href="">次へ&raquo;</li></a>
113
114  </ul>
115</div>
116
117
118<div class="introduction">
119
120<div class="prof">
121  <div class="profile">  
122    <img src="img/profile.png">   
123      <div class="name">
124         <h1><strong>John Doe</strong></h1>
125           <ul>
126             <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
127             <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
128             <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
129           </ul>
130      </div>
131 </div>  
132    <p>これはプロフィールウィジェットです。ここにはプロフィール画像・名前・自己紹介文・ソーシャルリンク（最大7つ）を設定することができます。</p>
133</div>
134 
135
136<div class="footer-right">
137  <h2>フッター右</h2>
138  <p>3つのフッター右ウィジェットエリアはフッターの右側に表示され、使用する数によって幅は自動的に調整されます。1つも使用しない場合は表示されません。</p>
139</div>
140
141<div class="post">
142  <h2>最近の投稿</h2>
143  <ul>
144    <li><a href="">書くためのテーマ</a><br>2018年9月1日</li>
145    <li><a href="">画像付きの投稿</a><br>2018年3月5日</li>
146    <li><a href="">引用付きの投稿</a><br>2018年3月5日</li>
147  </ul>
148</div>
149  
150<div class="category">
151  <h2>カテゴリー</h2>
152  <ul>
153    <li><a href="">サンプル投稿</li></a>
154    <li><a href="">投稿フォーマット</li></a>
155    <li><a href="">普通の投稿</li></a>   
156  </ul>
157</div>
158
159</div>
160
161  <input type="text" name="sabject" placeholder="検索...">
162
163</main>
164
165<footer>
166  <ul>
167    <li><a href=""><i class="fab fa-twitter fa-fw"></i></a></li>
168    <li><a href=""><i class="fab fa-facebook fa-fw"></i></a></li>
169    <li><a href=""><i class="fab fa-instagram fa-fw"></i></a></li>
170  </ul>
171
172  <p>Powered by WordPress | Theme: Write by Themegraphy</p>
173</footer>
174
175</body>
176</html>
177
178

CSS
1html, body,
2ul, ol, li,
3h1, h2, h3, h4, h5, h6, p, div {
4  margin: 0;
5  padding: 0;
6}
7
8 body { 
9 font-family: "Yu Mincho","Hiragino MIncho Pro" ,"serif";
10  margin:80px 140px 0 140px;   
11}
12
13* {
14  box-sizing: border-box;
15}
16
17 img {
18  max-width: 100%;
19  height:auto;
20} 
21
22 li { 
23  list-style: none;
24 } 
25
26
27a:hover {
28  color:#b8860b;
29}
30
31p, li {
32  color:#77778d;
33}
34
35header .container h1 {
36  font-size: 40px;
37  font-weight: bold;
38  height:55px;
39
40}
41
42.logo {
43  color:black;
44}
45
46header p {
47  font-size: 18px;
48 
49}
50
51header a {
52  text-decoration: none;
53}
54
55 .nav ul { 
56  display:flex;
57  width: 450px;
58  height: 84px;
59  justify-content:space-between;
60}
61
62
63
64ul li {
65  align-self:flex-end;
66
67}
68
69.container  a {
70  color:black;
71}
72
73 header .container {
74  display:flex;
75  justify-content: space-between;
76 }
77
78
79
80 .search-icon span {
81   display:block;
82   padding-top: 60px;
83
84 }
85
86
87.main-image {
88  margin-top:70px;
89}
90
91
92  main img {
93    width:100%; 
94  }
95
96  .main-image h1 {
97    color: #77778d;
98    font-size: 25px;
99    line-height: 1.9;
100    padding: 85px 0 ;
101    font-weight: normal;
102    letter-spacing: 1px;
103  }
104
105  .wrapper a {
106    color:black;
107    font-size: 22px;
108    font-weight: bold;
109    text-decoration: none;
110
111  }
112
113  .section {
114    display:flex;
115    padding-bottom: 70px;
116  }
117
118  .date {
119    width: 30%;
120  }
121
122  .info {
123    width: 70%;
124  }
125
126  .info p {
127    padding-bottom:20px;
128  }
129
130
131.number .next {
132  display: block;
133  
134}
135
136.page ul {
137  text-align: center;
138  display:flex;
139  justify-content:center;
140  
141}
142
143.number {
144  width:50px;
145  line-height:50px;
146}
147
148.number a {
149  text-decoration: none;
150  color: grey;
151}
152
153.next {
154  width: 85px;
155  line-height:50px;
156}
157
158.page li {
159  border: 1px solid #DDDDDD;
160  margin-right: 10px;
161}
162
163.page {
164  padding-bottom: 100px;
165  border-bottom: 1px solid  #DDDDDD;
166}
167
168.profile img {
169  width:100px;
170  height:100px;
171  border-radius: 50%;
172}
173
174  .name li { 
175  display: inline-block;
176  width: 30px;
177  height:15px;
178}  
179
180 .fa-fw {
181 font-size: 25px;
182 color:silver;
183 
184}
185
186.fa-fw:hover{
187  color: grey;
188}
189
190
191.profile {
192  display:flex;
193}
194
195
196
197.name h1 {
198  font-size: 20px;
199  font-weight: bold;
200  padding: 20px 0 15px 10px;
201  
202}
203
204.name {
205  padding-left: 20px;
206}
207
208.introduction {
209  display:flex;
210  padding-top: 40px;
211}
212
213.prof {
214  width: 35%;
215  padding: 40px 50px 0 0;
216}
217.footer-right {
218  width: 25%;
219  padding: 40px 50px 0 0;
220
221}
222.post {
223  width: 20%;
224  padding: 40px 50px 0 0;
225}
226.category {
227  width:20%;
228  padding: 40px 50px 0 0;
229}
230
231.introduction h2 {
232  font-size: 16px;
233  font-weight: normal;
234}
235
236.post a {
237  text-decoration: none;
238  border-bottom: 1px solid  #DDDDDD;
239  color: #77778d;
240
241}
242.category a {
243  text-decoration: none;
244  border-bottom: 1px solid  #DDDDDD;
245  color: #77778d;
246}
247
248.post a:hover {
249  color:#b8860b
250}
251.category a:hover {
252  color:#b8860b
253}
254
255.profile  {
256  padding-bottom: 18px;
257}
258
259
260.footer-right p {
261  padding-top: 25px;
262}
263.post ul {
264  padding-top: 25px;
265}
266.category ul {
267  padding-top: 25px;
268}
269
270.post li {
271  padding-bottom: 12px;
272}
273.category li {
274  padding-bottom: 15px;
275}
276
277input {
278  line-height:35px;
279  display: block;
280  width: 150px;
281  padding-left:10px;
282  font-size: 16px;
283  margin-left: auto;
284}
285
286main {
287  padding-bottom: 50px;
288  border-bottom: 1px solid  #DDDDDD;
289}
290
291
292 footer li { 
293  display: inline-block;
294  width: 30px;
295  height:15px;
296 }
297
298 footer {
299   padding: 50px 0 ;
300   display: flex;
301 }
302
303 footer ul {
304   padding-right: 220px;
305 }
306
307 @media (max-width: 1000px) {
308      body { 
309    /* margin: 80px 140px 0 140px; */
310    /* 左右の余白「140px」は広すぎるので狭くする、 */
311    margin-left: 20px;
312    margin-right: 20px;
313  }   
314
315
316
317  .prof img {
318    /* 画像を少し小さくする。100pxのままがいいなら不要。 */
319    width: 80px;
320    height: 80px;
321
322    /* 余白が余ったときや足りないとき伸び縮みしない。「80px」はwidthと同じ大きさを指定。 */
323    flex: 0 0 80px;
324  }
325  .prof .name {
326    /* 余白が余ったときや足りないとき伸び縮みする */
327    flex: 1 1 0%;
328  }
329}
330@media (max-width: 767px) {
331  /* 画面サイズが767px以下のとき、フッターを横並びでなく縦並びにする */
332  .introduction {
333    display: block;
334    
335  }
336
337
338
339  .prof,
340  .footer-right,
341  .post,
342  .category {
343    /* 縦並びにしたとき、横幅いっぱいに広げる */
344    width: auto;
345    padding-right: 10px;
346  }
347
348  .section {
349    display:block;
350   
351}
352
353.info {
354  width: auto;
355}
356
357header .container {
358  display: block;
359}
360
361.nav ul {
362  display:block;
363  padding:20px 0;
364}
365
366}

kei344

2020/04/21 08:52

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

行動規範の内容に同意します

回答1件

ベストアンサー

bodyに設定している余白ぶん、横幅いっぱいに指定している要素のmargin-leftとmargin-rightにマイナス値を指定するといかがでしょうか?

CSS
1body {
2  margin:80px 140px 0 140px;
3}
4
5.xxxx {
6  margin-left: -140px;
7  margin-right: -140px;
8}
9
10@media (max-width: 1000px) {
11  body {
12    margin-left: 20px;
13    margin-right: 20px;
14  }
15  .xxxx {
16    margin-left: -20px;
17    margin-right: -20px;
18  }
19}