レスポンシブにした時に、要素が画面幅一杯に広がらず、途切れてしまう現象が起きています。

久しぶりにHTML/CSSコーディングの模写を始めましたが、画面幅を変更すると、レイアウトが崩れてしまい、横幅一杯に要素が広がりません。原因は何が考えられますでしょうか？
ソースコードを添付します。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<title>初級編ーコーディング練習</title>
8	<link rel="stylesheet" href="css/style.css">
9</head>
10
11<body>
12<!-- header -->
13<header>
14<h1><img src="img/logo.svg" alt="ロゴです。"></h1>
15<nav>
16	<ul>
17		<li>NEWS</li>
18		<li>ABOUT</li>
19		<li>BUSINESS</li>
20		<li>COMPANY</li>
21	</ul>
22</nav>
23<span class="header-nav_btn--contact">お問い合わせ</span>
24</header>
25
26<!-- ファーストビュー -->
27<div class="first-view">
28<img class="main-visual" src="img/mainvisual.jpg" alt="メインビジュアルになります。">
29</div>
30<section class="news" id="news">
31<span class="theme-en">NEWS</span>
32<span class="theme-ruby">ニュース</span>
33
34<div class="news-list__wrapper">
35<ul class="news-list">
36	<li class="news-item">
37	<time datetime="2021-7-22 13:00">2021.07.21</time>
38	<span class="category">NEWS</span>
39	<p>タイトルタイトルタイトルタイトル</p>
40	</li>
41	<li class="news-item">
42	<time datetime="2021-7-22 13:00">2021.07.21</time>
43	<span class="category">PRESS</span>
44	<p>タイトルタイトルタイトルタイトル</p>
45	</li>
46	<li class="news-item">
47	<time datetime="2021-7-22 13:00">2021.07.21</time>
48	<span class="category">NEWS</span>
49	<p>タイトルタイトルタイトルタイトル</p>
50	</li>
51</ul>
52</div>
53
54</section>
55
56<!-- 弊社紹介セクション -->
57<section class="about clearfix" id="about">
58<div class="about-inner-wrapper">
59<img src="img/about.jpg" alt="弊社について">
60<div class="txt_area">
61	<span class="theme-en">ABOUT</span>
62	<span class="theme-ruby">私たちについて</span>
63	<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
64	テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>	
65</div>
66</div>
67</section>
68
69<!-- 事業内容セクション -->
70<section class="business" id="business">
71	<span class="theme-en">BUSINESS</span>
72	<span class="theme-ruby">事業内容</span>
73
74<div class="bussiness-item__wrapper">
75 <ul class="business-item-list">
76	 <li class="business-item">
77         <span>web制作・マーケティング</span>
78	 <img src="img/business1.jpg" alt="マーケティング部門">
79	 </li>
80	 <li class="business-item">
81	 <span>プロモーション企画・制作</span>
82	 <img src="img/business2.jpg" alt="プロモーション企画部門">
83	 </li>
84	 <li class="business-item">
85	 <span>インターネットメディア事業</span>
86	 <img src="img/business3.jpg" alt="インターネットメディア事業部門">
87	 </li>
88	 <li class="business-item">
89	 <span>ソーシャル企画・運営</span>
90	 <img src="img/business4.jpg" alt="ソーシャル企画及び運営部門">
91	 </li>
92 </ul>
93</div>
94	
95</section>
96
97<!-- 会社概要セクション -->
98<section class="company" id="company">
99<div class="company-wrapper">
100<div class="company-bg-white__area">
101	<span class="theme-en">COMPANY</span>
102	<span class="theme-ruby">会社概要</span>
103
104	<table>
105	<tbody>
106	<tr><th>会社名</th>
107		<td>ウェブエンターテイメントデザイン株式会社</td>
108	</tr>
109	<tr><th>所在地</th>
110		<td>東京都渋谷区桜丘町99-9 West Building 3F</td>
111	</tr>
112	<tr><th>代表</th>
113		<td>ＸＸＸＸＸＸ</td>
114	</tr>
115	<tr><th>設立</th>
116		<td>ＸＸＸＸＸＸ</td>
117	</tr>
118	<tr><th>資本金</th>
119		<td>3,000,000円</td>
120	</tr>
121	<tr><th>事業内容</th>
122		<td>Web制作・マーケティング<br>
123		インターネットメディア事業<br>
124		プロモーション企画・制作<br>
125		ソーシャル企画・運営</td>
126	</tr>
127	
128	</tbody>
129	</table>
130</div>
131<p class="company-img"><img src="img/company.jpg" alt="会社概要について"></p>
132</div>
133</section>
134
135<footer>
136<div class="footer-inner">
137<h1><img src="img/logo.svg" alt="ロゴです。"></h1>
138<div class="shop-adress">
139	Web Entertainment Design Inc.spanbr <br>
140	West Building 3F <br>
141	9-99 Sakuragaokacho Shibuya-ku <br>
142	Tokyo, Japan 150-0031 <br>
143	T/99-9999-9999</div>
144</div>
145<p class="copyright">© Web Entertainment Design Inc.</p>
146</footer>
147</body>
148</html>

Css
1@charset "UTF-8";
2
3/* リセットCss */
4*,::before,::after{
5	margin: 0;
6	padding: 0;
7	box-sizing: border-box;
8}
9html{
10	font-size: 62.5%;
11	width:100%;
12}
13body{
14	background-color: #F0F0F0;
15	display: block;
16	font-size: 1.6rem;
17}
18ul,ol{
19	list-style-type: none;
20}
21img{
22	max-width:100%;
23	height: auto;
24	vertical-align: baseline;
25}
26/* float解消 */
27.clearfix::after{
28	display: block;
29	clear: both;
30	content: "";
31}
32
33/* ヘッダー */
34header{
35	display: flex;
36	justify-content: flex-start;
37	align-items: center;
38	padding: 28px 0 26px 0;
39	position: relative;
40}
41header h1{
42	max-width:100px;
43	width: 100%;
44	margin-left: 91px;
45}
46header nav ul{
47	margin-left: 60px;
48}
49header nav ul li{
50	display: inline-block;
51	font-size: 1.4rem;
52}
53header nav ul li+li{
54	margin-left: 30px;
55}
56/* お問い合わせボタン */
57.header-nav_btn--contact{
58	position: absolute;
59	right:0;
60	top:0;
61	width:200px;
62	height:100%;
63	display: flex;
64	justify-content: center;
65	align-items: center;
66	background-color: #000;
67	color:#fff;
68	font-size: 1.2rem;
69}
70
71/* 各セクション */
72/* NEWSセクション */
73section{
74	margin-top:130px;
75	width:1000px;
76	margin-left: auto;
77	margin-right: auto;
78}
79.theme-en{
80	display: block;
81	margin-bottom: 20px;
82	letter-spacing: 0.3em;
83	font-size: 3.6rem;
84}
85.theme-ruby{
86	display: block;
87}
88.theme-ruby::after{
89	display: block;
90	content: "";
91	width: 43px;
92	height: 1px;
93	border: 1px solid #000;
94	margin: 40px 0;
95}
96.news-list{
97	margin-top: 64px;
98	font-size: 1.4rem;
99	display: flex;
100	justify-content: flex-start;
101	align-items: center;
102	width: auto;
103	flex-direction: row;
104}
105.news-item{
106	padding-right: 80px;
107}
108.news-item p{
109	font-size: 1.6rem;
110	margin-top: 2rem;
111	white-space: nowrap;
112}
113.category{
114	background-color: #000;
115	color: #fff;
116	padding: 5px 10px;
117}
118.news-list li + li{
119	border-left: 1px solid #000;
120	padding-left: 20px;
121}
122/* ABOUTセクション */
123section.about{
124	width:100%;
125}
126.about-inner-wrapper img{
127	width: 50%;
128	float: left;
129}
130.about-inner-wrapper .txt_area{
131	float: left;
132	width: 45%;
133	position: relative;
134	padding-left: 70px;
135	padding-top: 200px;
136	line-height: 2;
137}
138/* BUSINESSセクション */
139.bussiness-item__wrapper{
140	padding: 0 100px;
141}
142.business-item-list{
143	display: flex;
144	justify-content: center;
145	align-items: center;
146	flex-wrap: wrap;
147}
148.business-item{
149	width: 45%;
150	margin-bottom: 53px;
151}
152.business-item span{
153	display: block;
154	margin-bottom: 10px;
155}
156.business-item:nth-child(2n+1){
157	margin-right: 64px;
158	margin-top: 150px;
159}
160/* COMPANYセクション */
161.company{
162	margin-bottom: 110px;
163}
164.company-bg-white__area{
165	background-color: #fff;
166	padding: 110px 62px;
167    	width: 50%;
168}
169.company-img{
170	height: 0;
171}
172.company-img img{
173	width:55%;
174	height: 400px;
175	object-fit: cover;
176	position: relative;
177	right: -50%;
178	bottom: 530px;
179	margin-left: -50px;
180}
181/* tableタグ */
182table{
183	border-collapse: collapse;
184}
185th,td{
186	padding-bottom: 1em;
187	font-size: 1.4rem;
188}
189th{
190	display: flex;
191	text-align: left;
192}
193td{
194	padding-left: 43px;
195}
196td br{
197	display: block;
198	content: "";
199	margin-bottom: 1em;
200}
201/* footer */
202footer{
203	background-color: #fff;
204	width:100%;
205	padding-top: 44px;
206	padding-bottom: 22px;
207}
208footer h1{
209	width: 100px;
210}
211.footer-inner{
212	width:1000px;
213	margin-right: auto;
214	margin-left: auto;
215	display: flex;
216	justify-content: space-between;
217	align-items: center;
218}
219.copyright{
220	width:1000px;
221	margin-right: auto;
222	margin-left: auto;
223}
224
225@media screen and (max-width:900px) { 
226section{
227	width:100%;
228	margin-right: 0;
229}
230/* header */
231header{
232	align-items: flex-start;
233    	flex-direction: column;
234}
235header h1{
236	margin-left:0;
237	margin-bottom: 10px;
238}
239.header-inner{
240	display: block;
241	padding:10px 30px 10px 10px;
242}
243header nav ul{
244	margin-left: 0;
245}
246.header-nav_btn--contact{
247	display: none;
248}
249/* メインビジュアル */
250.main-visual{
251	width: 100%;
252	height: 600px;
253	object-fit: cover;
254}
255/* news セクション */
256.news-list{
257	flex-direction: column;
258}
259.news-item{
260	margin-bottom: 50px;
261}
262.news-list li + li{
263	border:none;
264	padding-left: 0;
265}
266/* about セクション */
267.about-inner-wrapper .txt_area{
268	float: none;
269	width: 100%;
270	padding-left:0;
271}
272.about-inner-wrapper img{
273	width:100%;
274	float: none;
275}
276/* business セクション */
277.bussiness-item__wrapper{
278	padding:0;
279}
280.business-item{
281	width: 100%;
282	margin-bottom: 0;
283}
284.business-item:nth-child(2n+1){
285	margin: 0;
286}
287/* company セクション */
288.company-bg-white__area{
289	width:100%;
290	padding: 60px 28px;
291}
292.company-img{
293	height:auto;
294}
295.company-img img{
296	width:100%;
297	position: static;
298	margin-left: 0;
299}
300/* table */
301th,td{
302	display: block;
303}
304td{
305	padding-left: 1em;
306}
307/* footer */
308.footer-inner{
309	display: block;
310}
311}

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

回答1件

ベストアンサー

幅1000px以下の環境ではこれが問題では？

CSS
1.copyright{
2    width:1000px;
3    margin-right: auto;
4    margin-left: auto;
5}

投稿2021/07/25 09:54

kei344

総合スコア69606

ah6BD2gZo5GnjnT

2021/07/25 10:28

無知で申し訳ないのですが、レスポンシブにした時には、 .copyrightの箇所を .copyright{ width:100%; } に修正すればよろしいのでしょうか？

ah6BD2gZo5GnjnT

2021/07/25 10:33

こちら解決できました！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

レスポンシブにした時に、要素が画面幅一杯に広がらず、途切れてしまう現象が起きています。

関連した質問