footerの線を画面いっぱいに伸ばしたい

前提・実現したいこと

サイト作成をしてます。
最後のfooter2の白い線を画面いっぱいに広げたいです。
サイト見本
file:///Users/kishichihiro/Desktop/%E3%82%B3%E3%83%BC%E3%83%86%E3%82%99%E3%82%A3%E3%83%B3%E3%82%AF%E3%82%99%E5%BF%9C%E7%94%A8/3_2/index.html

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="UTF-8">
5  <title>Ropeace Project</title>
6  <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9
10  <div class="wrapper">
11  <header>
12    <div class="header_a">
13     <div class="title">
14     <img src="./images/logo.png" alt="ロゴ" id="logo">
15     <h1 class="bold">ROPEACE PROJECT</h1>
16    </div>
17     <ul class="menu">
18       <li>Top</li>
19       <li>About</li>
20       <li>Join</li>
21       <li>Contact</li>
22     </ul>
23   </div>
24
25   <div class="header_b">
26    <div class="header_b_contents">
27      <p id="header2_p">ROPEACE PROJECTは、世界の子どもたちへ「なわとび」を直接届ける活動です。</p>
28    <div class="button">
29      <p class="bold">なわとび・ロープの寄付はこちらから</p>
30    </div>
31  </div>
32  <img src="./images/main.png" alt="main写真" id="main">
33</div>
34</header>
35
36  <main class="main_contents">
37    <div class="news">
38      <h2>
39        <span class="border">News</span>
40      </h2>
41      <div class="news_pic">
42        <img src="images/news1.png" alt="写真1" id="news1">
43        <img src="images/news2.png" alt="写真2" id="news2">
44        <img src="images/news2.png" alt="写真3" id="news3">
45      </div>
46    </div>
47
48    <div class="contents">
49      <h3>
50        <span class="border">Contents</span>
51      </h3>
52
53      <div class="about_us">
54        <img src="images/contents1.png" alt="about_usの写真">
55        <div class="about_uscomment">
56          <h4>ABOUT US</h4>
57          <p>「ROPE」（なわとび）を通して、「PEACE」（平和な世界）を創っていきたいという想いから、「ROPE」と「PEACE」を掛け合わせた「ROPEACE」という造語が生まれ、活動はネパールの大震災があった翌年の2016年にROPEACE PROJECTが設立され始動しました。</p>
58        </div>
59      </div>
60
61      <div class="join_us">
62        <div class="join_uscomment">
63          <h4>JOIN US</h4>
64          <p>なわとびを子どもたちに届けるために、様々な形でROPEACE PROJECTに参加することができます。なわとびを寄贈やクラウドファンディングやグッズ購入という形で支援ができます。個人、企業、学校など幅広い参加が支援を求めています。</p>
65        </div>
66          <img src="images/contents2.png" alt="join_usの写真">
67      </div>
68    </div>
69</main>
70
71<footer>
72  <div class="footer1">
73    <p>ROPE & PEACE<br>~なわとびで世界中を笑顔に~</p>
74    <button type="button" id="button">
75      オンラインによる寄付はこちらから
76    </button>
77    </div>
78    <div class="footer2">
79      <p>Copyright ©︎ 2020 PROPEACE PROJECT All RightS Reserved.</p>
80    </div>
81  </div>
82</footer>
83</body>
84</html>

CSS
1.wrapper{
2	margin-right: auto;
3	margin-left: auto;
4}
5
6.bold{
7	font-weight: bold;
8	text-align: center;
9}
10.header_a {
11	width: 1280px;
12	margin-right: auto;
13	margin-left: auto;
14	display: flex;
15	align-items: center;
16	justify-content: space-around;
17	background-color: white;
18	font-size: 20px;
19}
20
21#logo{
22	margin:10px;
23	width: 35px;
24	height:auto;
25}
26.title{
27	display: flex;
28	justify-content: center;
29	align-items: center;
30}
31.menu{
32	list-style: none;
33	font-size: 10px;
34	line-height: 35px;
35	margin-left: 10px;
36	display: flex;
37	justify-content: center;
38	align-items: center;
39}
40.menu li{
41	display: block
42	align: center;
43	width: 45px;
44}
45
46
47.header_b{
48	height: 420px;
49	display: flex;
50	justify-content: center;
51	align-items: center;
52	background-image: url("./images/bg.png");
53	background-size: cover;
54}
55.header_b_contents{
56	width: 350px;
57	height:150;
58	margin-right: 60px;
59	display: flex;
60	flex-direction: column;
61	align-items: center;
62}
63
64#header2_p{
65	font-size: 18px;
66	color: white;
67	margin:auto;
68}
69
70#main{
71	width: auto;
72	height: 350px;
73}
74
75.button{
76	width: 200px;
77	padding-top: 15px;
78	padding-bottom: 15px;
79	margin: 50px;
80	font-size: 10px;
81	border-radius: 150px;
82	background-color: white;
83}
84
85
86.main_contents{
87	width: 1280px;
88	margin-right: auto;
89	margin-left: auto;
90	padding-top: 70px;
91	padding-bottom: 70px;
92}
93
94.news h2 {
95	text-align: center;
96	font-weight: bold;
97	font-size: 17px;
98}
99
100.contents h3 {
101	text-align: center;
102	font-weight: bold;
103	font-size: 17px;
104}
105
106.border {
107	padding-bottom: 6px;
108	border-bottom: solid 2px red;
109}
110
111.news_pic {
112	margin: 20px;
113	display: flex;
114	justify-content: center;
115}
116
117#news1, #news2, #news3 {
118	margin: 18px;
119	width: 300px;
120	height: auto;
121}
122
123
124.about_us {
125	display: flex;
126	justify-content: center;
127	margin-top: 35px;
128	margin-left: auto;
129	margin-right: auto;
130	width: 970px;
131	height: 260px;
132	box-shadow: 3px 3px 5px gray;
133}
134.about_uscomment h4 {
135	font-weight: bold;
136	margin-top: 35px;
137	margin-bottom: 18px;
138	margin-left: 10px;
139
140}
141.about_uscomment p {
142	font-size: 16px;
143	color: gray;
144	margin-left: 20px;
145	margin-right: 20px;
146
147}
148.about_us img {
149	border-radius: 5px;
150	width: 485px;
151}
152
153.join_us {
154	display: flex;
155	justify-content: center;
156	margin-top: 35px;
157	margin-left: auto;
158	margin-right: auto;
159	width: 970px;
160	height: 260px;
161	box-shadow: 3px 3px 5px gray;
162}
163.join_uscomment h4 {
164	font-weight: bold;
165	margin-top: 35px;
166	margin-bottom: 18px;
167	margin-left: 10px;
168
169}
170.join_uscomment p {
171	font-size: 16px;
172	color: gray;
173	margin-left: 20px;
174	margin-right: 20px;
175	height: 270px;
176	width:auto;
177
178}
179.join_us img {
180	border-radius: 5px;
181	width: 480px;
182}
183
184footer {
185		background-image: url("./images/bg.png");
186		height: 200px;
187		display: flex;
188		flex-direction: column;
189		align-items: center;
190}
191
192.footer1 p {
193	margin-top: 30px;
194	text-align: center;
195	color: white;
196	font-size: 15px;
197}
198
199#button {
200	background-color: white;
201	margin-top: 17px;
202	padding-top: 12px;
203	padding-bottom: 12px;
204	font-size: 10px;
205	border-radius: 150px;
206	margin-left: 10px;
207	font-weight: bold;
208	border: none;
209}
210
211.footer2 {
212	margin-top: 20px;
213}
214
215.footer2 p {
216	text-align: center;
217	color:white;
218	font-size: 8px;
219	padding: 8px;
220	border-top: white solid 1px;
221}
222

試したこと

widthで100%にしましたがもちろん作動しませんでした。
footerは特に幅指定してないです。
よろしくお願いいたします。

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

ここにより詳細な情報を記載してください。

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

回答2件

ベストアンサー

下記を追加してみてください。

css
1footer {
2  ...
3  width: 100%;
4}
5
6.footer2 {
7  ...
8  width: 100%;
9}

投稿2021/08/26 08:04

agumon

総合スコア271

osaya

2021/08/26 08:07 編集

ありがとうございます！できました！本当すごいです。一つよければ教えていただきたいのですが、 widthは1280px;とwidth:100%　の両方書くと何か違う作用をするのですか？ググっても分からず・・・

agumon

2021/08/26 08:15

同じセレクタ内に書いた場合ということでしょうか？であれば下に書いた方が優先され適応されるだけになります。

osaya

2021/08/26 08:34

なるほど。では特に両方書く意味はないのですね。ありがとうございました！！！

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

こんにちは

もしかして.footer2 p に100%をかけてみましたか？（試したことの件）
ディレクトリーが

html
1<div class="footer2">
2 <p></p>
3</div>

になっているので、divのwidthを変えない限り変更はできません。
なので、.footer2にwidth:100%;をかけると解決します。

【追記】＝＝＝＝＝＝
footerにも100%かけているのを忘れていました・・・
やっていることは他の方と同じなのでそちらを参考にしてください・・・
＝＝＝＝＝＝

またお節介で申し訳ないのですが、
ちょくちょく文法エラー（閉じ忘れなど）を発見するので、エラーを表示できるツールでの作成や
チェッカーなどでのチェックをお勧めします。
エラーによりうまくcssが反映されないなどのトラブルもあるので・・・
よければ試してみてください。

お勧めのチェッカーは
これです

今回の検証へのリンクはこちらです。
https://jsfiddle.net/morimorinoki/oLu0rvy1/13/
※検証のために白い文字を灰色に変更しています。

ご参考ください

投稿2021/08/26 08:29

編集2021/08/26 08:34

morimorinoki

総合スコア84

morimorinoki

2021/08/26 08:35 編集

おっと・・・私がだらだら書いている間に他の方が回答してくれていました・・・同じ回答なのでチェッカーのくだりだけ読んでください・・・・（恥ずかしい・・・）

osaya

2021/08/26 08:37

いつもありがとうございます！ご指摘の通りfooter2 pにwidthを指定していました。親要素にかけないとだめということですね。勉強になりました！また、文法エラーについてもご指摘いただきありがとうございます(泣) さっそく取り入れました！ありがとうございました！！！

morimorinoki

2021/08/26 08:38

よかったです！また、補足し忘れていたのですが、ローカルデータのチェックは右にある『DETA』にコピーして検証してみてください！

osaya

2021/08/26 08:49

わかりました！そうします！ありがとうございました( ；∀；)

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.46%

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

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

質問する

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

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