レスポンシブデザインで右端に謎の余白が生まれる

【HTML CSS】
閲覧ありがとうございます。プログラミング初心者です。模写コーディングを行っているのですが、どうしてもうまくいかない箇所があります。
https://code-step.com/demo/html/store2/
このサイトを模写コーディングしているのですが、レスポンシブデザインが上手くいきません。
トップページの商品画像を中央寄せしようとしても、右端の画像に謎の余白が生まれてしまい、奇麗な中央寄せになりません（画像の通り）。

いったい何が原因なのでしょうか。ご教授お願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>My Work - Portfolio</title>
6    <link rel="stylesheet" href="style.css">
7    <link rel="icon" href="favicon.ico">
8    <link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
9    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
10  </head>
11  <body>
12    <header>
13      <div class="header-left">
14        <a href="index.html"><img src="https://code-step.com/demo/html/store2/img/logo.svg"alt="#"></a>
15      </div>
16      <div class="header-right">
17        <ul>
18          <li><a class="far" href="products.html">PRODUCTS</a></li>
19          <li><a href="about.html">ABOUT</a></li>
20          <li><a href="company.html">COMPANY</a></li>
21          <li><a class="spe" href="mailto:info@example.com">CONTACT</a></li>
22        </ul>
23      </div>
24    </header>
25    <main>
26      <div class="main-top">
27        <div class="imgset">
28          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item1.jpg" alt="#">
29          <p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
30        </div>
31        <div class="imgset right">
32          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item2.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
33        </div>
34        <div class="imgset">
35          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item3.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
36        </div>
37        <div class="far  imgset right>
38          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item4.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
39        </div>
40      </div>
41      <div class="main-under">
42        <div class="imgset">
43          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item5.jpg" alt="#">
44          <p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
45        </div>
46        <div  class="imgset">
47          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item6.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
48        </div>
49        <div  class="imgset">
50          <a href="item.html"><img src="https://code-step.com/demo/html/store2/img/item7.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
51        </div>
52        <div class="far imgset>
53          <a  href="item.html"><img src="https://code-step.com/demo/html/store2/img/item8.jpg" alt="#"><p>プロダクトタイトルプロダクトタイトル<br>¥99,999 +tax</p></a>
54        </div>
55      </div>
56    </main>
57    <div class="more">
58      <a href="products.html">Viwe More</a>
59    </div>
60    <footer>
61      <div class="footer-left">
62        <ul>
63          <li><a href="https://www.instagram.com/">INSTAGRAM</a></li>
64          <li><a href="https://twitter.com/home">TWITTER</a></li>
65          <li><a href="https://www.facebook.com/">FACEBOOK</a></li>
66        </ul>
67      </div>
68      <div class="footer-right">
69        <p>© Furniture Design</p>
70      </div>
71    </footer>
72  </body>
73</html>

CSS
1body {
2  width: 100%;
3}
4
5header {
6  margin-right: auto;
7  margin-left: auto;
8  width: 1300px;
9  height: 80px;
10  line-height: 80px;
11}
12
13header a:hover {
14  opacity: 0.7;
15}
16
17.header-left {
18  float: left;
19}
20
21.header-left img {
22  width: 180px;
23}
24
25.header-left a {
26  transition: all 0.3s;
27}
28
29.header-right {
30  float: right;
31}
32
33.header-right li {
34  list-style: none;
35  float: right;
36}
37
38.header-right a {
39  text-decoration: none;
40  color: black;
41  transition: all 0.3s;
42  border-right: 1px solid black;
43  padding-right: 8px;
44}
45
46.header-right a:not(.far) {
47  margin-right: 15px;
48}
49
50.spe {
51  border-left: 1px solid black;
52  padding-left: 8px;
53}
54
55main {
56  margin-right: auto;
57  margin-left: auto;
58  width: 1300px;
59  font-size: 14px;
60}
61
62.main-top {
63  display: flex;
64  margin-bottom: 50px;
65}
66
67.main-top div {
68  width: 25%;
69  font-size: 12px;
70}
71
72.main-top div:not(.far) {
73  margin-right: 40px;
74}
75
76.main-top img {
77  width: 100%;
78}
79
80.main-top a {
81  text-decoration: none;
82  color: black;
83  transition: all 0.3s;
84}
85
86.main-under,.far-under {
87  display: flex;
88}
89
90.main-under div,.far-under div {
91  width: 25%;
92  font-size: 12px;
93}
94
95.main-under div:not(.far),.far-under div:not(.far) {
96  margin-right: 40px;
97}
98
99.main-under img,.far-under img {
100  width: 100%;
101}
102
103.main-under a,.far-under a {
104  text-decoration: none;
105  color: black;
106  transition: all 0.3s;
107}
108
109
110.main-top a:hover,.main-under a:hover,.far-under a:hover {
111  opacity: 0.7;
112}
113
114.main-except p {
115  width: 600px;
116  margin-top: 50px;
117  margin-bottom: 300px;
118}
119
120.far-under {
121  margin-top: 50px;
122  margin-bottom: 50px;
123}
124
125.btn {
126  margin-bottom: 100px;
127}
128
129.btn ul {
130  display: flex;
131  justify-content:center;
132}
133
134.btn li {
135  list-style: none;
136}
137
138.btn li:not(.spec) {
139  margin-right: 40px;
140}
141
142.spec1 {
143  margin-left: 40px;
144}
145
146.btn a {
147  text-decoration: none;
148  color: black;
149}
150
151.com {
152  margin: 50px 0px;
153  font-size: 14px;
154}
155
156dl:not(.cap) {
157  display: block;
158  width: 700px;
159  margin-left: 10px;
160  font-size: 14px;
161}
162
163dl:not(.speci,.cap) {
164  border-bottom: 1px solid  #dcdbdb;
165}
166
167dt {
168  float: left;
169}
170dt:not(.item) {
171  padding-top: 15px;
172}
173
174dd {
175  margin-left: 200px;
176  padding-bottom: 15px;
177}
178
179dd:not(.item1) {
180  padding-top: 15px;
181}
182
183.map iframe {
184  margin-top: 30px;
185  margin-left: 10px;
186  margin-bottom: 100px;
187  width: 700px;
188  height: 300px;
189}
190
191.pro {
192  margin-top: 30px;
193  margin-bottom: 40px;
194  font-size: 14px;
195}
196
197.more {
198  padding: 40px 0px 140px 0px;
199}
200
201.more a {
202  text-align: center;
203  transition: all 0.3s;
204  text-decoration: none;
205  color: black;
206  display: block;
207  font-size: 14px;
208}
209
210.more a:hover {
211  opacity: 0.7;
212}
213
214@media (max-width: 670px ) {
215  * {
216    float: none;
217    position: static;
218  }
219  img {
220    max-width: 100%;
221    height: auto;
222  }
223
224  body {
225    width: auto;
226  }
227  
228  header {
229    width: auto;
230  }
231  .header-right {
232    display: block;
233    clear: both;
234    line-height: 30px;
235    font-size: 12px;
236  }
237  main {
238    width: 340px;
239    margin-right: auto;
240    margin-left: auto;
241  }
242
243  .main-top,.main-under {
244    display: block;
245  }
246  .main-top div {
247    width: 43%;
248    float: left;
249    margin-right: initial !important;
250  }
251  .main-top div:not(.right) {
252    padding-right: 10px;
253  }
254}

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

回答1件

width: 43%となっているので、ふたつ足しても100%にならず余白が生まれるからではないかと思います。

解決方法ですが、とりあえずであれば、widthを適切に設定するか、または右側のブロックをfloat: rightすればそれっぽくなると思います。

ただ、ブロックを横並びにする目的でフロートを使うのは10年ぐらい時代遅れなやり方ですので、2021年にあえて選択する理由もなく、特別な理由がなければあえて学習する必要もないと思います。
フレックスレイアウトやグリッドレイアウトを検討してみてください。

投稿2021/09/22 02:18

Lhankor_Mhy

総合スコア36158

nakadora0516

2021/09/23 01:45

お忙しい中ご回答ありがとうございます！お返事の連絡が遅れてしまい申し訳ございません。 widthを50%にすると、横2列にならずデザインがおかしくなってしまいます。 ■■ ■■ これをwidth50%にすると ■ ■ ■ ■ こうなってしまうのです。よろしければもう一度アドバイスいただけないでしょうか。よろしくお願いいたします。

Lhankor_Mhy

2021/09/23 11:58

いわゆる「カラム落ち」という現象で、フロートレイアウトが面倒な理由の一つです。繰り返しになりますが、フレックスレイアウトやグリッドレイアウトをご検討ください。フロートレイアウトを使うなら、とりあえず、こちらを参考にしてみてはいかがですか？ https://developer.mozilla.org/ja/docs/Web/CSS/box-sizing

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