bodyが1200pxに固定されておりどの設定が邪魔しているかわからない

グローバルナビゲーションや画像を両端まで配置したいのですが、一部のページで適応できず。デベロッパーツールで確認するとwidthが1200pxに上限になっていました。
"wrapper01が邪魔しているのかと設定を変更してみましたが、同一の設定されているページは思い通りに表示されます。
どこが悪いのかご助言お願いします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="utf-8">
5<meta name="description" content="＃">
6<link href="../../../css/reset.css" type="text/css" rel="stylesheet" madia="screen">
7<link href="../../../css/style.css" type="text/css" rel="stylesheet" madia="screen">
8<link href="../../../css/rinen.css" type="text/css" rel="stylesheet" madia="screen">
9<link rel="shortcut icon" href="/favicon.ico">
10<meta name="viewport" content="width=device-width,initial-scale=1.0">
11<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP" rel="stylesheet">
12<title>経営理念┃******</title>
13</head>
14<body>
15	<div class="wrapper01">
16	<header>
17		<!-- header-->
18		<div class="headline">
19		<a href="../../.././"><img src="images/rogo.svg" alt="コーポレートマーク"></a>
20		<p class="syamei">************</p>
21		</div>
22		<nav class="main-nav">
23		<ul class="nav-list">
24			<li class="top-nav"><a href="../../.././">HOME</a></li>
25			<li class="top-nav"><a href="../.././">会社概要</a>
26				<ul>
27					<li><a href=".././">会社沿革</a></li>
28					<li><a href="./">会社理念</a></li>
29					<li><a href="*/./">事業案内</a></li>
30				</ul>
31			</li>
32			<li class="top-nav"><a href="#">お問い合わせ</a></li>
33			<li class="top-nav"><a href="../../../*/">よくある質問</a></li>
34			<li class="top-nav"><a href="../../../*/./">採用</a></li>
35		</ul>
36	</nav>
37	</header>
38		<!-- /header -->
39		<div class="breadcrumb">
40		<ol>
41				<li><a href="/">HOME</a></li>
42				<li><a href="/#/">会社概要</a></li>
43				<li><a href="/#/##/">会社沿革</a></li>
44				<li><a href="/#/##/###">会社理念</a></li>
45			</ol>
46		</div>
47		<main>
48			<h1 class="setumei">*********</h1>
49			<ul class="company-rinen">
50				<li class="note"><p>1.*********</p></li>
51				<li class="note"><p>2.*********</p></li>
52				<li class="note"><P>3.********</P></li>
53				<li class="note"><p>4.*********</p></li>
54				<li class="note"><P>5.*********</P></li>
55			</ul>
56			<h2 class="syatyouaisatu">*****</h2>
57			<p class="indent">********。</p>
58			<p class="indent">********。<br></p><p class="indent">**********</p>
59			<p class="indent">**************。</p><p class="indent02">*********<span class="ningen">「***」</span>**。**********<span class="ningen">「***」</span>*******。</p>
60			<p class="indent"><span class="ningen">「人間力」</span>*********。<p> class="indent01">********。<br>
61			<p class="syatyou">******&nbsp;&nbsp;&nbsp;***&nbsp;&nbsp;**</p>
62
63
64<div class="sitagazou">
65<img class="footerue" src="images/image1.jpg" alt="********">
66<p>～Smile at Your Future～</p>
67</main>
68<div class="bottom">
69	<footer>
70			<ul class="footer-nav">
71			<li class="footer-nav1"><a href="../../.././">HOME</a></li>
72			<li>
73		<ul class="footer-nav1">
74			<li class="niretu"><a href="../.././">会社概要</a></li>
75			<ll class="niretu"><a href=".././">会社沿革</a></ll>
76			<li class="niretu"><a href="./">経営理念</a></li>
77			<li class="niretu"><a href="#/./">事業案内</a></li>
78		</ul>
79	</li>
80	<li>
81		<ul class="footer-nav2">
82			<li class="niretu"><a href="#">お問い合せ</a></li>
83		</ul>
84	</li>
85	<li>
86		<ul class="footer-nav2">
87			<li class="niretu"><a href="../../../#/./">よくある質問</a></li>
88		</ul>
89	</li>
90	<li>
91		<ul class="footer-nav2">
92		<li class="niretu"><a href="../../../#/./">採用</a></li>
93	</ul>
94</li>
95</ul>
96<div class="sitalogo">
97<img  src="images/rogo.svg" alt="コーポレートマーク">
98</div>
99<p class="tyosakuken">&copy;2020 ******* All rights reserved</p>
100	</footer>
101	</div>
102</div>
103</body>
104</html>

CSS
1@charset "utf-8";
2
3body{
4	margin-right:auto;
5	margin-left:auto;
6	height: 100%;
7}
8.wf-notosansjapanese { font-family:"-apple-system","BlinkMacSystemFont","Noto Sans JP","Meiryo","游ゴシック","ヒラギノ角ゴ ProN",sans-serif;}
9
10.headline {
11	display: flex;
12	width: 95%;
13	margin-top: 30px;
14	margin-bottom: 0;
15	margin-left: 10px;
16	justify-content: space-between;
17	align-items: baseline;
18	list-style-type:none;
19}
20.headline p{
21	font-size:30px;
22	margin-top:0;
23	font-weight: bold;
24	text-align: right;
25	margin-bottom: 0;
26	vertical-align: middle;
27}
28.main-nav {
29    background: #0000FF;
30}
31.nav-list{
32	padding: 35px 0 5px 0 25px;
33	margin-top: 3px;
34	margin-bottom: 15px;
35	font-size:16px;
36	display : flex;
37	display : -webkit-box;     /* old Android */
38	display : -webkit-flex;    /* Safari etc. */
39	display : -ms-flexbox;     /* IE10        */
40	display: -o-box;      /* Opera */
41	display: box;         /* ベンダープレフィックスなし */
42	justify-content:center;
43	list-style-type:none;
44	align-items:center;
45	max-width: 100%;
46	width: 1040px;
47	margin: 0 auto;
48  }
49.nav-list li a {
50  text-decoration: none;
51  color: #FFFFFF;
52  background-color: #0000FF;
53  display: block;
54  padding: 5px;
55}
56.nav-list li:hover a {
57  background-color: #000080;
58}
59.nav-list li:hover ul {
60  display: block;
61}
62.nav-list li ul {
63  margin: 0px;
64  padding: 0px;
65  list-style-type: none;
66  display: none;
67  width:11%;
68  position: absolute;
69  z-index:100;
70}
71.nav-list li:hover ul{display: block;}
72.nav-list li ul a {
73  display: block;
74  text-decoration: none;
75  color: #FFFFFF;
76  background-color: #0000FF;
77}
78.nav-list li ul li:hover a {
79  background-color: #008080;
80}
81.nav-list:after {
82  content: "";
83  clear: both;
84  display: block;
85}
86.top-nav{
87	width:20%;
88	font-size:20px;
89	text-align: center;
90	border-right: 1px solid;
91	border-left:1px solid;
92	border-color:#ffffff;
93	background: #0000FF;
94}
95.top-nav a{
96	display: inline-block;
97	text-decoration: solid;
98	height: 25px;
99}
100.top{
101	margin-top: 10px;/*ロゴ列*/
102}
103.syamei{/*TOP社名*/
104	font-size:30px;
105	margin-top:0;
106	margin-left: 450px;
107	font-weight: bold;
108	text-align: right;
109	margin-bottom: 0;
110	vertical-align: middle;
111}
112.breadcrumb{
113	padding-left: 200px;
114}
115.breadcrumb ol{
116	list-style-type: none;
117	margin: 30px 0 0 0;
118	padding: 0;
119}
120.breadcrumb li{
121	display: inline;
122	margin: 10px 0 0 0;
123}
124.breadcrumb li::after{
125	content: " ≫ ";
126	color: #999;
127}
128.breadcrumb li:last-child::after{
129	content: none;
130}
131.breadcrumb a{
132	text-decoration: none;
133	color: #1864b9;
134}
135.saiyou-zikou{
136	font-size:30px;
137	margin-top: 30px;
138	margin-bottom: 15px;
139}
140.topimages{
141	position: relative;/*相対配置*/
142}
143.topimages p{
144	position: absolute;/*絶対配置*/
145	color: white;/*文字は白に*/
146	font-weight: bold; /*太字に*/
147	font-size: 1.8em;/*サイズ2倍*/
148	top: 45%;
149	left: 18%;
150}
151.topimages img{
152	width: 100%;
153	height: 400px;
154}
155.kategoriue{
156	font-size: 16px;
157	font-weight: bold;
158	text-align: left;
159	margin-top: 15px;
160	margin-bottom: 150px;
161	width: 46%;
162}
163.kategoriue ul{
164	list-style-type: none;
165	line-height: 2.0;
166}
167.kategori{
168	font-size: 30px;
169	font-weight: bold;
170	color:#0000ff;
171	text-align: center;
172	margin-top: 200px;
173	margin-bottom: 30px;
174}
175.saiyou-setumei{
176	font-size: 23px;
177	margin-top: 20px;
178	margin-bottom: 500px;
179}
180.table-wrapper{
181	overflow:auto;
182	white-space: nowrap;
183	margin-bottom: 150px;
184	margin-top:40px;
185}
186.saiyou{
187	font-size: 30px;
188	margin-top: 30px;
189	margin-bottom: 20px;
190}
191.saiyou-setumei{
192	line-height: 1.8;
193	font-size: 20px;
194	margin-bottom: 300px;
195}
196dt,dl{
197	line-height: 1.7;
198	font-size: 19px;
199	margin-bottom: 10px;
200}
201.yokuaru{
202	font-size:30px;
203	margin-top: 20px;
204	margin-bottom: 15px;
205}
206/*gaiyou,enkaku h1*/
207.setumei{
208	font-size: 30px;
209	margin-top: 60px;
210	margin-bottom: 0;
211}
212.sitagazou{
213position: relative;/*相対配置*/
214}
215.sitagazou p{
216	position: absolute;/*絶対配置*/
217	color: white;/*文字は白に*/
218	font-weight: bold; /*太字に*/
219	font-size: 1.8em;/*サイズ2倍*/
220	font-family: "Bradley Hand ITC";
221	top: 50%;
222	left: 40%;
223}
224.sitagazou img{
225	width: 100%;
226	height: 250px;
227}
228.footer-nav{
229	list-style-type:none;
230	align-items: start;
231	padding: 5px 15px 10px 15px;
232	margin-bottom: 10px;
233	flex-wrap: wrap;
234	display : -webkit-box;     /* old Android */
235	display : -webkit-flex;    /* Safari etc. */
236	display : -ms-flexbox;     /* IE10        */
237	display : flex;
238}
239.footer-nav a{
240		text-decoration: none;
241}
242.footer-nav1{
243	list-style-type: none;
244	align-items: normal;
245	padding: 0 10px 35px 10px
246}
247.footer-nav2{
248	list-style-type: none;
249	align-items: normal;
250	padding: 0 10px 5px 10px;
251	text-decoration: none;
252}
253.sanretu{
254	padding-bottom: 10px;
255	list-style-type:none;
256	padding: 0px 0px 5px 0px;
257	margin-bottom: 10px;
258	align-items:stretch;
259}
260.sitalogo{
261	text-align: center;
262}
263.tyosakuken{
264	color:#444444;
265	text-align: center;
266	bottom: 0;
267}
268/*indeximg*/
269.main{
270	width: 100%;
271	height: 400px;
272	margin-right: auto;
273	margin-left: auto;
274	display:block;
275}
276.wrapper01{
277	width: 100%;
278	/*min-height:calc(100% - 50px);*/
279}
280.bottom{
281	height:220px;
282	margin-top: 0;
283	padding-top: 5px;
284	line-height: 30px;
285	text-decoration: none;
286}
287.sentence{
288	margin-bottom: 150px;
289}
290.rinen{
291	font-size: 25px;
292	text-align: center;
293}
294.top-sentence{
295	margin:15px auto 15px auto;
296	line-height: 2.1;
297	font-size: 19px;
298	margin-top: 30px;
299	text-indent: 2em;
300
301}
302.top-sentence01{
303	line-height: 2.1;
304	font-size: 19px;
305	margin-top: 30px;
306	margin-bottom: 30px;
307	text-indent: 2em;
308}
309.topsetumei01{
310	display: inline-block;
311	font-size: 20px;
312	text-align: center;
313	margin-top: 8px;
314	margin-bottom: 10px;
315	padding-bottom:5px;
316}
317li.indexsetumei:hover{
318	opacity: 0.6;
319}
320.news{
321	font-size: 35px;
322}

.company-rinen{
	text-indent: 2em;
	list-style-type:none;
}
.syatyouaisatu{
	font-size: 30px;
	margin-top: 10px;
	margin-bottom: 20px;
}
.indent{
	padding-left: 1em;
	text-indent: 1em;
	font-size: 20px;
	line-height:2.3;
}
.indent01{
	text-indent: 2em;
	font-size: 20px;
	line-height:2.3;
	margin-bottom: 30px;
}
.indent02{
	padding-left: 2em;
	text-indent:1em;
	font-size: 20px;
	line-height:2.3;
}
.company-rinen{
	font-size: 20px;
	line-height: 2.5;
}
.ningen{
	font-weight: bold;
	color: #000000;
}
.syatyou{
	text-align: right;
	margin-right:0;
	font-size: 20px;
}

Lhankor_Mhy

2021/03/18 00:36

問題が再現しませんでした。

Lhankor_Mhy

2021/03/18 07:30

質問の編集を拝読。やはり、問題が再現しませんでした。

mari.rinn

2021/03/18 07:57 編集

cssのファイル3つをテキストエディタで、一つずつ「width:1200px;」か「1200px」だけでも良いかもですが、それで検索かけたら該当するものが見つかると思うのですが？それと、グローバルナビゲーションというのは、クラス名でいうと、headlineというdivのとこですか？日本語で書かれるとわかりにくいので、クラス名とかで書いて頂けますか？あともう一つ。実際に問題が出ているところの画像とかを貼って頂くことはできますか？

let

2021/03/20 19:49

Lhankor_Mhyさんいつもご回答いただきありがとうございます。またご助言いただければありがたいです。ありがとうございました。

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

回答1件

ベストアンサー

理念のページだけ上手くいかないってことでよろしかったでしょうか？
なんか個別のCSSを当ててるみたいなので…下のコードを無効化するとどうなりますでしょうか？
あとは、ご提示いただいているCSSがどのファイルのものなのかを追記していただき、
そのうえで、足りない方のCSSを貼っていただけると解決できるかもしれません。

html
1<link href="../../../css/rinen.css" type="text/css" rel="stylesheet" madia="screen">

画像追加です。コードをローカルで実行してみました。
全体にwidth:100%;が効いちゃってるみたいですが、これはご希望通りでしょうか？

投稿2021/03/18 04:46

編集2021/03/18 11:08

退会済みユーザー

総合スコア0

let

2021/03/18 07:20

rinen.cssも記載しております。編集で変更致しました。

退会済みユーザー

2021/03/18 11:09

ありがとうございます！回答に画像を追加しましたのでご確認いただけますと助かりますっ

let

2021/03/20 19:48

色々と想定外な部分もありますのでもう一度色々試してみます。ありがとうございました。また何かありましたら宜しくお願い致します。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

bodyが1200pxに固定されておりどの設定が邪魔しているかわからない

関連した質問