同じクラスにも関わらずコンテンツ幅に違いが生じた

実現したいこと

コンテンツの最大横幅を1200px、横のパディングを５％に指定したいです。
（メインビジュアルのみ全幅）

前提

模写コーディングをしています。

コンテンツ幅を指定するcssには、同じクラス（wrapper）を用いているのですが、
Archive、Newのセクションのみ、コンテンツの最大横幅１200px、横のパディング５％が効いていて
Catalog、Antique、フッターのセクションには同じように効いていません。

Catalog、Antique、フッターのセクションもArchive、Newのセクションと同じコンテンツ幅を指定したいです。

現状はこのような表示になっています。

該当のソースコード

HTML
1
2ー省略ー
3
4   <main>
5       <section class="wrapper">
6          <h2 class="section-title">A special, long article in a newspaper or magazine</h2>
7          <p class="section-text">
8            テキストテキストテキストテキストテキストテキストテキストテキスト<br>
9            テキストテキストテキストテキストテキスト
10         </p>
11
12          <div class="container">
13             <a href="index.html" class="archive">
14                <img src="./assets/img/magazine-archive.jpg" alt="アーカイブ">
15                <div class="archive-title">
16                    <h3>Archive</h3>
17                    <p>
18                     テキストテキストテキストテキスト<br>
19                     テキストテキストテキスト
20                    </p>
21                </div>
22            </a>
23
24            <a href="index.html" class="news">
25                <img src="./assets/img/magazine-new.jpg" alt="ニュース">
26                <div class="news-title">
27                    <h3>News</h3>
28                    <p>
29                     テキストテキストテキストテキスト<br>
30                     テキストテキストテキスト
31                    </p>
32                </div>
33            </a>
34          </div>
35      </section>
36      
37      <section class="grid">
38          <img src="./assets/img/fashion.jpg" class="section-visual" alt="背景画像">
39           <div class="wrapper grid-items">
40                <h2 class="section-title">Fashion & Style</h2>
41                <p class="section-text">
42                 テキストテキストテキストテキストテキストテキストテキストテキスト<br>
43                 テキストテキストテキストテキストテキスト
44                </p>
45
46                <a href="index.html" class="read-more-botton">
47                    Read More
48                </a>
49            </div>
50       </section>
51
52       <section class="wrapper wrapper-gray">
53          <div class="flex">
54            <div class="child-catalog-left">
55                <img src="./assets/img/catalog.jpg" alt="カタログ">
56            </div>
57            <div class="child-catalog-right">
58                <h2>Catalog</h2>
59                <p>
60                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
61                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
62                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
63                </p>
64            
65                <p>
66                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
67                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
68                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
69                </p>
70
71                <p>
72                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
73                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
74                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
75                </p>
76            </div>
77          </div>
78
79          <div class="flex-reverse">
80            <div class="child-catalog-left">
81                <img src="./assets/img/catalog.jpg" alt="アンティーク">
82            </div>
83            <div class="child-catalog-right">
84                <h2>Antique</h2>
85                <p>
86                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
87                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
88                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
89                </p>
90            
91                <p>
92                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
93                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
94                    <span>テキストテキストテキストテキストテキストテキストテキストテキスト</span>
95                </p>
96                   
97                   <a href="index.html">Read more</a>
98            </div>
99          </div>
100       </section>
101   </main>
102
103   <footer>
104    <div class="wrapper footer-wrapper">
105        <div class="item">
106            <img src="./assets/img/logo.svg" alt="Wag88">
107        </div>
108
109        <div class="item">
110            <h3>タイトル</h3>
111            <ul>
112                <li>テキストテキストテキスト</li>
113                <li>テキストテキストテキスト</li>
114                <li>テキストテキストテキスト</li>
115                <li>テキストテキストテキスト</li>
116                <li>テキストテキストテキスト</li>
117            </ul>
118        </div>
119
120        <div class="item">
121            <h3>タイトルタイトルタイトル</h3>
122            <p>
123                テキストテキストテキストテキストテキストテキストテキストテキストテキスト
124                テキストテキストテキストテキストテキストテキストテキストテキストテキスト
125                テキストテキストテキストテキストテキストテキストテキストテキストテキスト
126            </p>
127        </div>
128    </div>
129        <p class="copyright">&copy Mag88</p>
130    
131   </footer>
132
133</body>
134
135</html>

css
1@charset "UTF-8";
2
3* {
4    margin: 0;
5}
6
7html {
8    font-size: 100%;
9}
10
11body {
12    font-family: "Arial", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
13    font-size: 0.875rem;
14    color: #2a2a2a;
15}
16
17img {
18    max-width: 100%;
19}
20
21a {
22    text-decoration: none;
23    color: black;
24}
25
26.wrapper {
27    max-width: 1200px;
28    padding: 0 5%;
29    margin: 0 auto 100px auto;
30}
31
32.section-title {
33    margin: 50px 0 20px 0;
34    text-align: center;
35}
36
37.section-text {
38    text-align: center;
39    margin-bottom: 30px;
40}
41
42/*--------------
43header
44--------------*/
45ー省略ー
46
47/*---------------
48Archive、New
49---------------*/
50
51.container {
52    display: grid;
53    grid-template-columns: 1fr 1fr;
54    gap: 20px;
55}
56
57.container > a {
58    display: grid;
59    place-items: center;
60}
61
62.container > a > * {
63    grid-column: 1;
64    grid-row: 1;
65}
66
67.archive-title, 
68.news-title {
69    color: white;
70    font-size: 0.8rem;
71    font-weight: bold;
72    background-color: rgba(0,0,0,0.5);
73    text-align: center;
74    padding: 15px 20px;
75} 
76
77
78/*--------------
79fashion&styles
80--------------*/
81ー省略ー
82
83/*--------------
84catalog&antiqe
851段目
86--------------*/
87.wrapper-gray {
88    max-width: 100%;
89    background-color: rgb(239, 236, 236);
90}
91.flex {
92    display: flex;
93    justify-content: space-between;
94}
95
96.child-catalog-left,
97.child-catalog-right {
98    width: calc(100% / 2 - 10px);
99   
100}
101.child-catalog-left {
102    display: flex;
103    justify-content: center;
104    align-items: center;
105}
106
107.child-catalog-left img {
108    max-width: 90%;
109    max-height: 90%;
110    vertical-align: bottom;
111}
112
113.child-catalog-right {
114    display: flex;
115    flex-direction: column;
116    align-items: center;
117    justify-content: center;
118}
119
120.child-catalog-right h2 {
121    padding: 20px;
122}
123
124.child-catalog-right p {
125    padding: 10px;
126}
127
128/*--------------
129catalog&antiqe
1302段目
131--------------*/
132.flex-reverse {
133    display: flex;
134    justify-content: space-between;
135    flex-direction: row-reverse;
136}
137.child-catalog-right a {
138    display: block;
139    border: 1px solid;
140    width: 150px;
141    text-align: center;
142    margin: 0 auto;
143    padding: 10px 0;
144    margin: 30px;
145    
146}
147
148/*-----------------
149フッター 
150------------------*/
151.wrapper:last-child {
152   margin-bottom: 0;
153}
154
155.footer-wrapper {
156    display: flex;
157    justify-content: space-around;
158    color: white;
159    background-color: rgb(57, 56, 56);
160    max-width: 100%;
161    height: 300px;
162    margin: 0;
163}
164
165.item {
166    display: grid;
167    width: calc(100% / 3);
168    padding: 50px 0;
169}
170
171.item:first-child {
172    align-items: center;
173}
174
175.item ul {
176    padding: 0;
177}
178.item li {
179    list-style-type: '-';
180}
181.copyright {
182    background-color: white;
183    text-align: center;
184    font-size: 0.8rem;
185    padding: 30px;
186}

試したこと

思いつくことを試してみましたが、理想通りにいきませんでした。
例えば、
・各セクションに
,wrapper {
max-width: 1200px;
padding: 0 5%;
margin: 0 auto;}
を追記してみたり、

・wrapperを削除し、mainに対して同じ宣言をしてみましたが解決することができませんでした。

初歩的なことかと思いますが、長い時間解決することができていないので、お力添えいただけますと幸いです。

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

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

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

回答1件

ベストアンサー

フッターのセクションには同じように効いていません。

いちおう、効いてますね。

多分、ご質問の意図は

CSS
1.wrapper {
2    max-width: 1200px!important;
3    padding: 0 5%;
4    margin: 0 auto 100px auto!important;
5}

これで解決するのでは？？？

投稿2023/02/03 04:33

penguin520

総合スコア345

wkou4627

2023/02/03 15:26

ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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