レスポンシブ対応の際、右側に余白ができる

発生している問題と質問

現在WEB制作を独学で学んでいる者です。
デザインカンプからのコーディングを行っているのですが、レスポンシブ対応の際に右側に大きな余白ができてしまいます。(画像を添付しています)
自分では解決方法がわからないので、教えていただきたいです。よろしくお願いします。

試したこと

・serviseクラスのwidthを固定値で指定していた(それによりレスポンシブ化の時にオーバーフローしてしまっていた)のをやめた。
→右側の空白問題は解消せず

参考画像(1枚目：見本, 2枚目：現状)

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>Design-N top</title>
7        <meta name="description" content="ページの説明" />
8        <meta name="format-detection" content="telephone=no" />
9
10        <!-- favicon/webclipicon ※今回は無し　-->
11
12        <!-- ogp -->
13        <meta property="og:site_name" content="サイト名" />
14        <meta property="og:url" content="URL" />
15        <meta property="og:type" content="website or article" />
16        <meta property="og:title" content="ページのタイトル" />
17        <meta property="og:description" content="ページの説明" />
18        <meta property="og:image" content="URL" />
19        <meta property="og:locale" content="ja_JP" />
20        <!-- <meta property="fb:app_id" content="AppID"> -->
21        <meta name="twitter:card" content="summary_large_image or summary" />
22        <!-- <meta name="twitter:site" content="@moshamusha2010" /> -->
23        <meta name="twitter:description" content="ページの説明" />
24        <meta name="twitter:image:src" content="URL" />
25
26        <!-- css -->
27        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
28        <link rel="stylesheet" href="css/style.css" />
29
30        <!-- js 今回は無し-->
31
32        <!-- 場合によって必要 -->
33        <!-- <meta name="robots" content="noindex,nofollow"> -->
34    </head>
35
36    <body>
37        <header>
38            <div class="header-logo">
39                <a href="index.html"><img src="images/logo.svg" alt="Design-Nのロゴ画像"></a>
40            </div>
41        </header>
42        <main>
43            <div class="top-image">
44                <img src="images/pc_main-visual.jpg" alt="ビルの画像">
45            </div>
46            <div class="news">
47                <div class="news-title">
48                    <h2 class="title-en">NEWS</h2>
49                    <p class="title-ja">お知らせ</p>
50                </div>
51                <div class="news-contents">
52                    <div class="article">
53                        <div class="date">
54                            2023.03.20
55                        </div>
56                        <div class="article-title">
57                            <a href="#">ホームページをリニューアルしました！</a> 
58                        </div>
59                    </div>
60                    <div class="article">
61                        <div class="date">
62                            2023.03.01
63                        </div>
64                        <div class="article-title">
65                            <a href="#">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。</a>
66                        </div>
67                    </div>
68                    <div class="article">
69                        <div class="date">
70                            2022.02.20
71                        </div>
72                        <div class="article-title">
73                            <a href="#">テキストが入りますテキストが入りますテキストが入りますテキストが入ります。テキストが入りますテキストが入りますテキストが入ります。</a>
74                        </div>
75                    </div>
76                </div>
77                <div class="news-concept">
78                    <div class="concept-image">
79                        <img src="images/sp_main-visual.jpg" alt="女性の写真">
80                    </div>
81                    <div class="concept-text">
82                        <h1>デザインで<br>お客様の夢を叶える</h1>
83                        <p>お客様の夢を叶えること。<br>それがWebサイトのゴールであり、私たちが目指すことだと信じています。<br>夢を実現する手助けをさせてください。</p>
84                    </div>   
85                </div>
86            </div>
87            <div class="service">
88                <div class="service-title">
89                    <h2 class="title-en">SERVICE</h2>
90                    <p class="title-ja">サービス</p>
91                </div>
92                <div class="service-contents">
93                    <div class="item">
94                        <img src="images/design.jpg" alt="紙と鉛筆">
95                        <p>デザイン</p>
96                    </div>
97                    <div class="item">
98                        <img src="images/coding.jpg" alt="パソコンの画面">
99                        <p>コーディング</p>
100                    </div>
101                    <div class="item">
102                        <img src="images/app.jpg" alt="スマートフォン">
103                        <p>アプリ開発</p>
104                    </div>
105                </div>
106                <div class="service-button">
107                    <a class="button" href="#">サービス一覧</a>
108                </div>
109            </div>
110        </main>
111        <footer>
112            <p><small>©DesignN</small></p>
113        </footer>
114    </body>
115</html>
116
117

CSS
1@charset "utf-8";
2
3/* 共通部分 
4-----------------------------*/
5*{
6    box-sizing: border-box;
7}
8
9html{
10    font-size: 100%;
11}
12
13body{
14    color: #333333;
15    font-family: "Arial", "ヒラギノ角ゴシック", sans-serif ;
16}
17
18a{
19    text-decoration: none;
20}
21
22img{
23    max-width: 100%;
24    vertical-align: bottom;
25}
26
27/* HEADER 
28-----------------------------*/
29header{
30    margin: 0 auto;
31    height: 90px;
32    text-align: center;
33}
34
35.header-logo{
36    padding-top: 30px;
37    padding-bottom: 29px;
38}
39
40header img{
41    width: 120px;
42}
43
44/* MAIN
45-----------------------------*/
46
47main{
48    margin-bottom: 80px;
49}
50
51/* TOP-IMAGE */
52.top-image{
53    margin-bottom: 80px;
54}
55
56.top-image img{
57    width: 100%;
58    object-fit: cover;
59}
60
61/* news
62---------- */
63
64.news{
65    margin-bottom: 100px;
66}
67
68/* news-title */
69.news-title{
70    margin: 0 auto;
71    text-align: center;
72    margin-bottom: 30px;
73    line-height: 1;
74    letter-spacing: 0.03em;
75    
76}
77
78.title-en{
79    font-size: 32px;
80    font-weight: bold;
81    color: #007BFF;
82    margin-bottom: 8px;
83    
84}
85
86.title-ja{
87    font-size: 13px;
88    font-weight: 600;
89    
90}
91
92/* news-contents */
93.news-contents{
94    margin: 0 auto;
95    width: 760px;
96    margin-bottom: 100px;
97}
98
99.article{
100    display: flex;
101    border-bottom: 1px solid #EDEDED;
102    padding-bottom: 19px;
103    padding-top: 20px;
104    font-size: 15px;
105}
106
107.article-title{
108    font-weight: 300;
109}
110
111.article-title a{
112    color: #333333;
113}
114
115.article-title:hover{
116    border-bottom: 0.5px solid black;
117}
118
119.date{
120    margin-right: 47px;
121    font-weight: normal;
122}
123
124/* news-concept */
125
126.news-concept{
127    display: flex;
128    align-items: center;
129}
130
131.concept-image{
132    width: 50%;
133}
134
135.concept-text{
136    width: 50%;
137    padding-left: 70px;
138}
139
140.concept-text h1{
141    font-size: 32px;
142    color: #027BFA;
143    margin-bottom: 30px;
144    font-weight: 600;
145}
146
147.concept-text p{
148    font-weight: 300;
149    line-height: 1.8;
150}
151
152/* service
153------------ */
154
155.service{
156    margin: 0 auto;
157    text-align: center;
158    padding: 0 11%;
159}
160
161/* service-title */
162.service-title{
163    margin-bottom: 30px;
164    line-height: 1;
165    letter-spacing: 0.03em;
166}
167/* service-contents */
168.service-contents{
169    display: flex;
170    justify-content: space-between;
171    margin-bottom: 60px;
172}
173
174.item{
175    width: 31.5%;
176    line-height: 1;
177}
178
179.item img{
180    margin-bottom: 15px;
181}
182
183.item p{
184    font-weight: 600;
185}
186
187/* service-button */
188
189.button{
190    color: #FFFFFF;
191    background-color: #007BFF;
192    font-size: 15px;
193    display: inline-block;
194    padding: 20px 50px;
195    border-radius: 100px;
196    font-weight: 700;
197    width: 200px;
198    height: 55px;
199}
200
201.button:hover{
202    opacity: 0.7;
203    transition: 0.3s;
204}
205
206
207/* FOOTER 
208-----------------------------*/
209
210footer{
211    height: 92px;
212    background-color: #1F1F1F;
213    text-align: center;
214    font-size: 12px;
215    color: #7B7B7B;
216    padding-top: 39px;
217    padding-bottom: 39px;
218}
219
220/* レスポンシブ
221-----------------------------*/
222
223@media (max-width:600px){
224    /* news-contents */
225    .article{
226        display: block;
227    }
228}

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

回答1件

ベストアンサー

以前に同じようなご質問を見た気がします。

CSS3 - メディアクエリで要素全体が左に寄ってしまう｜teratail

↓ここでサイズを決め打ちしてるからではないですか？

css
1.news-contents{
2    margin: 0 auto;
3    width: 760px;
4    margin-bottom: 100px;
5}

開発者ツールをお使いになることをおすすめします。

投稿2021/10/07 05:30

Lhankor_Mhy

総合スコア36981

ss-ss

2021/10/07 06:32

Lhankor_Mhyさん、回答いただきありがとうございます。本当だ。。ここでオーバーフローしていたんですね。レスポンシブの画面で左右にスクロールできるくらい幅が広がっていなかったので、オーバーフローしていないと判断してしまっていました。以前と同じような質問となってしまい申し訳ありません。ご指摘いただきありがとうございました！開発者ツールの使い方を深く理解していなかったので、調べてみます。

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