レスポンシブ：1920✖️1080の画面で全体にデザインを広げたい

前提・解決したいこと

Webサイトを作成しています。レスポンシブのことです。とても基本的なことで申し訳ないのですが、
私は1366×768サイズのパソコンを使用していて、1920×1080サイズの画面でも横幅いっぱいにデザインが広がるようにしたいです。

今はmax-widthを1025pxにしてmargin: 0 auto 0 auto;にしているので中央揃えになります。
＊ヘッダーは左揃えになる。

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>ME SYSTEMS2</title>
7		<link rel="stylesheet" href="css/ME-2style.css">
8		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
9		<link rel="preconnect" href="https://fonts.googleapis.com">
10		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11		<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
12
13	</head>
14	<body>
15		<!-- Header Start -->
16		<header class="header">
17			<div class="header-wrapper">
18				<a href="#" class="logo">MES</a>
19				<nav class="nav">
20					<button class="nav__toggle" aria-expanded="false" type="button">
21						menu
22					</button>
23					<ul class="nav__wrapper">
24						<li class="nav__item"><a href="ME2index.html">Home</a></li>
25						<li class="nav__item"><a href="ME2index.html">About</a></li>
26						<li class="nav__item"><a href="ME2index.html">Products</a></li>
27						<li class="nav__item"><a href="ME2index.html">Contact</a></li>
28					</ul>
29				</nav>
30			</div>
31		</header>
32    <!-- Header End -->
33		
34	<!-- Main Start -->
35		<section class="top-image">
36		<img src="Images/image6.jpg" alt="">
37			<h3>Catchphrase</h3>
38			<h4>Robot FA,<br> Machine Tool Manufacturing and Sales, <br>Cutting, Accessory Assembly</h4>
39		</section>
40		
41		<div class="scrolldown1"><span>Scroll</span></div>
42
43		<!-- about -->
44		<section class="about">
45			<div class="about-title">About MES</div>
46			<section class="about-text">
47				<div class="about-text1">Seto, Aichi, Japan<br>Transportation equipment / machine tool / <br>industrial machinery
48				</div>
49			<div class="about-text2">MES is a leading global technology company that energizes the transformation of society and industry to achieve a more productive, sustainable future.  </div>
50			</section>
51		</section>
52		<!-- about end -->
53
54

CSS
1@charset "UTF-8";
2
3html {
4	font-size: 62.5%;
5}
6body {
7	background-color: #FAFAFA;
8	color: #000;
9	font-size: 16px;
10	max-width: 1025px;
11	margin: 0 auto 0 auto;
12}
13
14@media screen and (min-width: 1025px) {
15margin: 0 auto 0 auto;
16}
17
18*,*::before, *::after {
19	box-sizing: border-box;
20}
21a:link, a:visited, a:hover, a:active {
22	text-decoration: none;
23}
24
25/* 
26** The Header Media Queries **
27** Tweak as per your needs **
28*/
29.logo {
30	font-weight: bold;
31	font-size: 30px;
32	margin-left: 25px;
33	color: #FF0111;
34	letter-spacing: 0.1em;
35	font-family: "Bebas Neue",sans-serif;
36	opacity: 1;
37}
38.logo a:link {
39	color: #FF0111;
40}
41.logo a:visited {
42	color: #FF0111;
43}
44.logo a:hover {
45	color: #FF0111;
46}
47.logo a:active {
48	color: #FF0111;
49}
50 
51.header {
52	position: fixed;
53	z-index: 3;
54	background-color: #39454D; 
55	top: 0;
56	left: 0;
57	width: 1025px;
58	opacity: 0.75;
59}
60 
61.header-wrapper {
62	padding-top: 1rem;
63	padding-bottom: 1rem; 
64}
65@media (min-width: 1025px) {
66.header-wrapper {
67	display: flex;
68		justify-content: space-between;
69		align-items: center;
70		padding-top: 0;
71		padding-bottom: 0;
72	} 
73}
74@media (min-width: 1025px) {
75.nav__wrapper {
76		display: flex;
77		list-style-type: none;
78		margin-right: 15px;
79}
80 
81@media (max-width: 1024px) {
82.nav__wrapper {
83		position: absolute;
84		top: 100%;
85		right: 0;
86		left: 0;
87		z-index: -1;
88		background-color: #050606;
89		visibility: hidden;
90		opacity: 0;
91		transform: translateY(-100%);
92		transition: transform 0.3s ease-out, opacity 0.3s ease-out;
93	}
94
95.nav__wrapper.active {
96		visibility: visible;
97		opacity: 1;
98		transform: translateY(0);
99		color: #FFF;
100	} 
101}
102 
103.nav__item a {
104	display: block;
105	padding: 1.5rem 1rem; 
106	color: #FFF;
107}
108
109.nav__item a:hover::after {
110	width: 100%;
111}
112.nav__toggle {
113	display: none; 
114}
115@media (max-width: 1024px) {
116.nav__toggle {
117		display: block;
118		position: absolute;
119		right: 1rem;
120		top: 1rem; 
121	} 
122}
123
124	/* Main */
125	
126.top-image {/*親div*/
127		position: relative;/*相対配置*/
128		max-width: 100%;
129		height: auto;
130}
131
132.top-image h3 {
133	position: absolute;/*絶対配置*/
134	color: white;
135	font-size: 100px;
136	font-weight: bold; /*太字に*/
137	font-family: 'Roboto', sans-serif;/*Google Font*/
138	left: 100px;
139	top: 75px;
140	letter-spacing: 1.5px;
141}
142
143.top-image h4 {
144	position: absolute;/*絶対配置*/
145	color: white;/*文字は白に*/
146	font-size: 40px;
147	font-family: 'Roboto', sans-serif;/*Google Font*/
148	top: 300px;
149	left: 100px;
150	letter-spacing: 1.5px;
151	line-height: 1.5;
152}
153	
154	/*====== 9-1-1 縦線が動いてスクロールを促す =======*/
155
156/*スクロールダウン全体の場所*/
157.scrolldown1{
158    /*描画位置※位置は適宜調整してください*/
159	position:absolute;
160	left:50%;
161	bottom:10px;
162    /*全体の高さ*/
163	height:50px;
164}
165
166/*Scrollテキストの描写*/
167.scrolldown1 span{
168    /*描画位置*/
169	position: absolute;
170	left:-15px;
171	top: -15px;
172    /*テキストの形状*/
173	color: #eee;
174	font-size: 1.0rem;
175	letter-spacing: 0.05em;
176}
177
178/* 線の描写 */
179.scrolldown1::after{
180	content: "";
181    /*描画位置*/
182	position: absolute;
183	top: 0;
184    /*線の形状*/
185	width: 1px;
186	height: 30px;
187	background: #eee;
188    /*線の動き1.4秒かけて動く。永遠にループ*/
189	animation: pathmove 1.4s ease-in-out infinite;
190	opacity:0;
191}
192
193/*高さ・位置・透過が変化して線が上から下に動く*/
194@keyframes pathmove{
195	0%{
196		height:0;
197		top:0;
198		opacity: 0;
199	}
200	30%{
201		height:30px;
202		opacity: 1;
203	}
204	100%{
205		height:0;
206		top:50px;
207		opacity: 0;
208	}
209}
210/* scrol end */
211	
212/* about */
213.about {
214		background-color: #39454D;
215		height: 450px;
216  -webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
217  clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
218  padding: 60px 0 10px 0;
219}
220	.about .about-title {
221		color: #FFF;
222		font-size: 30px;
223		padding-left: 150px;
224		padding-top: 80px;
225		font-weight: bold;
226		font-family: 'Tondu beta', sans-serif;
227	}
228	.about .about-text {
229		display: flex;
230	}
231	.about .about-text1 {
232		color: #FFF;
233		font-size: 15px;
234		padding-top: 70px;
235		padding-left: 150px;
236		line-height: 2;
237	}
238	.about .about-text2 {
239		color: #FFF;
240		font-size: 20px;
241		padding-left: 200px;
242		padding-top: 70px;
243		width: 700px;
244	}

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

回答1件

ベストアンサー

- ダブルクォートが全角なのと、最後まで閉じてないですね
<meta name=”viewport” content=”width=device-width,initial-scale=1.0>

- セレクタが何もないですね
@media screen and (min-width: 1025px) {
margin: 0 auto 0 auto; // margin: 0 auto; で大丈夫です
}

- }が閉じてないですね
@media (min-width: 1025px) {
.nav__wrapper {
        display: flex;
        list-style-type: none;
        margin-right: 15px;
}

初歩的なミスが多いので使用されているツールはわかりませんが、Visual Studio Code（無償）などのエディターを使用して補完機能を活用してみてはいかがでしょう。

投稿2021/08/19 16:38