７００PX～１０２４PXの幅のデバイス内で、ヘッダー内にある項目ボタンがはみ出て表示されてしまう。

実現したいこと
会社のホームページを作っているのですが（存在しない会社ですが。）ホームページの上のヘッダー内にある項目ボタンが７００PX～１０２４PXの幅のデバイス内だと、項目ボタンがはみ出て全部見えなくて困っています。これを７００PX～１０２４PXのデバイスの幅でも、すべてのボタン項目を表示させたいです。

試したこと
responsivecssの一番したにある/* 画面幅（700px以上の時までの適応）指定 */の
width200pxを100pxに変更して幅を短くすることで、５つのボタンが７００PX～１０２４PXの範囲内に収まると思ったのですが、付属画像１のようにボタンの長さや文字の位置がおかしく表示されて困っています。付属画像２のようにきちんとしたボタンや文字を表示させたいです。

先に進めません。回答よろしくお願いいたします。６４０ｐｘ以下はハンバーガーメニューが表示されるようにコードを書いています。

付属画像１
![]

付属画像２

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="utf-8">
5	<meta name="robots" content="noindex,nofollow">
6	<title></title>
7	<meta http-equiv="X-UA-Compatible" content="IE=edge">
8	<meta name="viewport" content="width=device-width, initial-scale=1.0">
9	
10	<link rel="stylesheet" href="aaa.css">
11	<link rel="stylesheet" href="responsive.css">
12	
13	<script src="jquery-3.6.0.min.js"></script>
14
15<script>
16		$(function() {
17			const hum = $('#hamburger, .close')
18			const nav = $('.sp-nav')
19			hum.on('click', function(){
20				nav.toggleClass('toggle');
21			});
22		});
23	  </script>
24</head>
25<body>
26
27
28
29	<header id="header">
30		<h1 class="slide-left show">
31			<a href="/">RICO NOTES</a>
32		</h1>
33		<nav class="pc-nav slide-right show"><!--クリックして色を換えるボタンとアニメーション-->
34			<ul>
35				<li><a href="#" class="button">会社概要</a></li>
36				<li><a href="#" class="button">事業内容</a></li>
37				<li><a href="#" class="button">弊社の強み</a></li>
38				<li><a href="#" class="button">採用情報</a></li>
39				<li><a href="#" class="button">お問い合わせ</a></li>
40
41
42			</ul>
43		</nav>
44		<nav class="sp-nav"><!--スクロールしても文字を上に維持する-->
45			<ul>
46				<li><a href="#" class="button">会社概要</a></li>
47				<li><a href="#" class="button">事業内容</a></li>
48				<li><a href="#" class="button">弊社の強み</a></li>
49				<li><a href="#" class="button">採用情報</a></li>
50				<li><a href="#" class="button">お問い合わせ</a></li>
51				<li class="close"><span>閉じる</span></li>
52			</ul>
53		</nav>
54		<div id="hamburger" class="slide-right show">
55			<span></span>
56		</div>
57	</header>
58	<div class="main-visual">
59		<div class="slide-bottom show">
60			<h2>WEB DESIGN <span>IS</span> YOUR FUTURE</h2>
61			
62		</div>
63	</div>
64
65	<section id="about">
66		<h2 class="slide-bottom show">ABOUT<span></span></h2>
67		<p class="slide-bottom show">弊社は副業ビジネス開発及びIT総合コンサルティング会社です。</p>
68	</section>
69	<section id="service">
70		<h2 class="slide-bottom show">SERVICE<span></span></h2>
71		
72			<p class="slide-right show">詳しくは会社概要や事業内容のページをご参照下さい。<br>
73			スマートフォンの場合は右上の白い３本線をタップして下さい。</p>
74			<div class="slide-bottom show"><a href="#" class="button">&#8679;TOPへ </a></div>
75		
76	</section>
77	<footer>
78		<small>footer</small>
79	</footer>	
80<script>
81	//フェードイン用のコードです
82	$(function(){
83		$(window).on('load scroll', function() {
84			$(".show").each(function() {
85				var winScroll = $(window).scrollTop();
86				var winHeight = $(window).height();
87				var scrollPos = winScroll + (winHeight * 0.9);
88				if($(this).offset().top < scrollPos) {
89					$(this).css({opacity: 1, transform: 'translate(0, 0)'});
90				}
91			});
92		});
93	});
94	//フェードイン用のコードはここまでです
95
96	//ヘッダーの高さと背景色の変更
97	$(function () {
98		const header = $('#header');
99		$(window).on('load scroll' ,function () {
100			var headerHeight = header.innerHeight();
101
102			$(window).on('scroll' ,function () {
103				if ( $(this).scrollTop() > 100 ) {
104					header.addClass('min-header');
105				} else {
106					header.removeClass('min-header');
107				}
108			});
109		});
110});
111</script>	
112</body>
113</html>
114

css
1@charset "utf-8";
2* {
3	box-sizing: border-box;
4}
5body {
6	margin: 0;
7	padding: 0;
8	height: 100%;
9	font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "Helvetica Neue", Helvetica, Arial, sans-serif;
10	background-color: #fff;
11	letter-spacing : 0.2em;
12}
13header {
14	z-index: 9999;
15	padding: 30px 4% 10px;/*padding30pxはボタンの上の余白の大きさ10pxは下の余白の大きさ*/
16	position: fixed;
17	top: 0;
18	width: 100%;
19	background-color: transparent;
20	display: flex;
21	align-items: center;
22	transition: all .2s ease-out;
23}
24header.min-header {
25	padding: 10px 4%;
26	background-color: #293f4d;
27}
28h1 {
29	margin: 0; padding: 0;
30	font-size: 20px;/*トップ画面一番左上の会社のタイトルの文字の大きさ*/
31}
32a {	
33	text-decoration: none;
34	color: #fff;
35}
36p {
37	line-height: 2;
38}
39nav {
40	margin: 0 0 0 auto;
41}
42ul {
43	list-style: none;
44	margin: 0;
45	display: flex;
46}
47li {
48	margin: 0 0 0 15px;/*トップ画面の上部のボタンとボタンの間のすき間全て左側の余白が15ｐｘ*/
49	font-size: 14px;/*ボタン内の文字の大きさ*/
50}
51.main-visual {
52	display: flex;
53	justify-content: center;
54	align-items: center;/*トップ画像にある文字を画像の核の中央にする*/
55	height: 100vh;/*トップ画像の高さ例えば８０ｖｈだと８０％の縦表示になる。縮小ではなく消える*/
56	background: url('main_visual.jpg') top center / cover no-repeat;
57}
58
59/*トップ画像の中央の文字*/
60.main-visual h2 {
61	margin: 0 0 40px 0;
62	font-size: 30px;
63	font-weight: normal;
64	color: rgb(231, 98, 243);
65}
66.sp-nav {
67	display: none;
68}
69
70/*リンクボタン*//*会社概要など*/
71a.button {
72	display: block;
73	width: 200px;/*ボタンの横幅*/
74	margin: 0 auto;
75	padding: 15px 30px;
76	text-align: center;
77	border: 1px solid #fff;
78	transition: all .3s ease-out;
79}
80/*マウスで色を換えるボタン*/
81a.button:hover {
82	color: #505050;
83	background-color: #fff;
84}
85/* section */
86.flex {
87	display: flex;
88}
89section {
90	overflow: hidden;
91	text-align: center;
92	padding: 100px 0;
93}
94section h2 {
95	margin: 0 0 50px 0;
96	color: #293f4d;
97	text-align: center;
98}
99section p {
100	color: #293f4d;
101}
102
103
104#service {
105	background-color: #f7f7f7;
106}
107
108
109#service p {
110	margin: 0 0 40px 0;
111}
112#service a.button {
113	color: #293f4d;
114	border: 1px solid #293f4d;
115}
116#service a.button:hover {
117	color: #fff;
118	background-color: #293f4d;
119}
120/* footer */
121footer {
122	padding: 50px 0 20px;
123	background-color: #293f4d;
124	text-align: center;
125}
126
127
128
129/* フェードイン用のCSS */
130
131/* 上からフェードイン */
132.slide-top {
133	opacity: 0;
134	transform: translate(0, -20px);
135	transition: all 1s ease-out;
136 }
137
138/* 下からフェードイン */
139.slide-bottom {
140	opacity: 0;
141	transform: translate(0, 20px);
142	transition: all 1s ease-out;
143 }
144
145 /* 左からフェードイン */
146.slide-left {
147	opacity: 0;
148	transform: translate(-20px, 0);
149	transition: all 1s ease-out;
150 }
151
152/* 右からフェードイン */
153.slide-right {
154	opacity: 0;
155	transform: translate(20px, 0);
156	transition: all 1s ease-out;
157 }
158
159

responsivecss
1/*幅640px以下の場合ハンバーガーメニューを適応する*/
2/*幅640px以下の場合ハンバーガーメニューを適応する*/
3@media screen and (max-width: 640px) {
4	/*ハンバーガーメニュー*/
5	.pc-nav {
6		display: none;
7	}
8	.sp-nav {
9		z-index: 1;
10		position: fixed;
11		top: 0;
12		left: 0;
13		width: 100%;
14		height: 100vh;
15		display: block;
16		width: 100%;
17		background: rgba(0, 0, 0, .8);
18		opacity: 0;
19		transform: translateY(-100%);
20		transition: all .2s ease-in-out;
21	}
22	#hamburger {
23		position: relative;
24		display: block;
25		width: 30px;
26		height: 25px;
27		margin: 0 0 0 auto;
28	}
29	#hamburger span {
30		position: absolute;
31		top: 50%;
32		left: 0;
33		display: block;
34		width: 100%;/* 三本線一番上の線の長さ */
35		height: 2px;/*三本線一番上の線の余白や太さ  */
36		background-color: #fff;/* 三本線一番上の線の色 */
37		transform: translateY(-50%);
38	}
39	#hamburger::before {
40		content: '';
41		display: block;
42		position: absolute;
43		top: 0;
44		left: 0;
45		width: 100%;/* 三本線の真ん中の線の長さ */
46		height: 2px;/*三本線の真ん中の線の余白や太さ  */
47		background-color: #fff;/* 三本線の真ん中の線の色 */
48	}
49	#hamburger::after {
50		content: '';
51		display: block;
52		position: absolute;
53		bottom: 0;
54		left: 0;
55		width: 100%;/* 三本線の一番下の線の長さ */
56		height: 2px;/*三本線一番下の線の余白や太さ  */
57		background-color: #fff;/* 三本線の一番下の線の色 */
58	}
59	/*スマホメニュー*/
60	.sp-nav ul {
61		padding: 0;
62		display: flex;
63		flex-direction: column;
64		justify-content: center;
65		align-items: center;
66		height: 100%;
67	}
68	.sp-nav li {
69		margin: 0;
70		padding: 0;
71	}
72	.sp-nav li span {
73		font-size: 15px;
74		color: #fff;
75	}
76	.sp-nav li a, .sp-nav li span {
77		display: block;
78		padding: 20px 0;
79	}
80	/*-閉じるアイコンー*/
81	.sp-nav .close {
82		position: relative;
83		padding-left: 20px;
84	}
85	.sp-nav .close::before {
86		content: '';
87		position: absolute;
88		top: 50%;
89		left: 0;
90		display: block;
91		width: 16px;
92		height: 1px;
93		background: #fff;
94		transform: rotate( 45deg );
95	}
96	.sp-nav .close::after {
97		content: '';
98		position: absolute;
99		top: 50%;
100		left: 0;
101		display: block;
102		width: 16px;
103		height: 1px;
104		background: #fff;
105		transform: rotate( -45deg );
106	}
107	.toggle {
108		transform: translateY( 0 );
109		opacity: 1;
110	}
111	.main-visual {
112		padding: 0 4%;
113	}
114	h2 {
115		line-height: 1.6;
116		text-align: center;
117	}
118	/* section */
119	#service ul li {
120		width: 50%;
121	}
122}
123table {
124	max-width: 700px;
125	margin: 0 auto;
126	color: #aaa;
127}
128
129
130/* 画面幅（700px以上の時までの適応）指定 */
131@media screen and (min-width: 700px){
132
133/*リンクボタン*//*会社概要など*/
134a.button {
135	display: block;
136	width: 100px;/*ボタンの横幅*/
137	margin: 0 auto;
138	padding: 15px 30px;
139	text-align: center;
140	border: 1px solid #fff;
141	transition: all .3s ease-out;
142}
143
144}