子要素のwidthが100％にならない

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.0">
6  <title>isara</title>
7  <link rel="stylesheet" href="main.css">
8  <link rel="stylesheet" href="responsive.css">
9  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
10  <script defer="" src="https://use.fontawesome.com/releases/v5.13.1/js/all.js"></script>
11  <script defer="" src="https://use.fontawesome.com/releases/v5.13.1/js/v4-shims.js"></script>
12  <script src="./jquery-3.5.1.min.js"></script>
13</head>
14<body>
15  <div class="wrapper3">
16    <div>
17      <h2>iSaraで「基本的なプログラミングスキル」は教えません</h2>
18      <p id="f-4">基礎的なプログラミングスキルは無料で学べる時代。</p>
19      <p id="f-4">iSaraでは、基礎知識学習は<span>事前課題</span>と<span>チャットサポートのみ。<span</p>
20      <div class="wra3-content">
21        <div class="wra3-left">
22          <p id="step">STEP.1</p>
23          <p id="f-5">【バンコク渡航前１ヶ月】</p>
24          <p>事前課題で基礎知識を学ぶ</p>
25        </div>
26        <div class="wra3-center">
27          <p id="step">STEP.2</p>
28          <p id="f-5">【バンコク到着後】</p>
29          <p>実践的に稼ぐことに特化した学習</p>
30        </div>
31        <div class="wra3-right">
32          <p id="step">STEP.3</p>
33          <p id="f-5">【バンコク帰国後】</p>
34          <p>講座実施後の案件獲得サポート</p>
35        </div>
36      </div>
37      <div class="wra3-bottom">
38        <p>スキルアップしてもフリーランスエンジニアとして食べていくことは難しい。</p>
39        <p>フリーランスには <span>プログラミングスキル以外<spanが大切。</p>
40      </div>
41    </div>
42  </div>
43</body>
44</html>

css
1.wrapper3 {
2  display: -webkit-box;
3  display: -ms-flexbox;
4  display: flex;
5  -webkit-box-pack: center;
6      -ms-flex-pack: center;
7          justify-content: center;
8  -webkit-box-align: center;
9      -ms-flex-align: center;
10          align-items: center;
11  padding-top: 70px;
12  text-align: center;
13  background-color: #c7cac7;
14}
15
16.wrapper3 h2 {
17  font-size: 28px;
18  padding-bottom: 20px;
19  color: white;
20}
21
22.wra3-content {
23  display: -webkit-box;
24  display: -ms-flexbox;
25  display: flex;
26  width: 1170px;
27  -ms-flex-pack: distribute;
28      justify-content: space-around;
29  margin: 30px auto;
30}
31
32.wra3-left {
33  -ms-flex-preferred-size: 310px;
34      flex-basis: 310px;
35  background-color: white;
36  border-radius: 0.3em;
37  padding: 30px;
38}
39
40.wra3-left p {
41  font-weight: bold;
42}
43
44.wra3-center {
45  -ms-flex-preferred-size: 310px;
46      flex-basis: 310px;
47  background-color: white;
48  border-radius: 0.3em;
49  padding: 30px;
50}
51
52.wra3-center p {
53  font-weight: bold;
54}
55
56.wra3-right {
57  -ms-flex-preferred-size: 310px;
58      flex-basis: 310px;
59  background-color: white;
60  border-radius: 0.3em;
61  padding: 30px;
62}
63
64.wra3-right p {
65  font-weight: bold;
66}
67
68#step {
69  color: white;
70  font-weight: bold;
71  background-color: #ebb94d;
72  border-radius: 0.3em;
73  margin-bottom: 25px;
74  letter-spacing: 2px;
75}
76
77.wra3-bottom {
78  background-color: #016ea9;
79}
80#f-5 {
81  font-size: 14px;
82  margin-bottom: 15px;
83}

wra3-bottomの部分のwidthを100%にしたいのですが、どうしても広がりません。すべての要素がwra3-contentのwidthと同じになってしまいます。

すみませんが、よろしくお願いいたします。

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

回答2件

ベストアンサー

.wrapper3をflexレイアウトにする必要はない。これがwidthを狭めている原因。

Diff
1.wrapper3 {
2-  display: -webkit-box;
3-  display: -ms-flexbox;
4-  display: flex;
5-  -webkit-box-pack: center;
6-      -ms-flex-pack: center;
7-          justify-content: center;
8-  -webkit-box-align: center;
9-      -ms-flex-align: center;
10-          align-items: center;
11  padding-top: 70px;
12  text-align: center;
13  background-color: #c7cac7;
14}