widthが効きません。

サイトの横幅を短くしたときにulのwidthが変わりません。
また、もっと効率的なcss、htmlの書き方があったらご教授ください。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>あああああああ</title>
8    <link rel="stylesheet" href="style.css">
9    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
10</head>
11<body>
12
13    <div class="tab-panel">
14        <div class="header">
15            <div class="logo">
16              ああああああ
17            </div>
18            <!--タブ-->
19            <ul class="tab-group">
20                <li class="tab tab-A is-active">あ</li>
21                <li class="tab tab-B">い</li>
22                <li class="tab tab-C">う</li>
23                <li class="tab tab-D">え</li>
24                <li class="tab tab-E">お</li>
25                <li class="tab tab-F">か</li>
26                <li class="tab tab-G">き</li>
27                <li class="tab tab-H">く</li>
28                <li class="tab tab-I">け</li>
29                <li class="tab tab-J">こ</li>
30                <li class="tab tab-K">さ</li>
31                <li class="tab tab-L">し</li>
32                <li class="tab tab-M">す</li>
33                <li class="tab tab-N">せ</li>
34            </ul>
35        </div>
36        
37        <!--タブを切り替えて表示するコンテンツ-->
38        <div class="panel-group">
39            <div class="panel tab-A is-show">Content-A</div>
40            <div class="panel tab-B">Content-B</div>
41            <div class="panel tab-C">Content-C</div>
42            <div class="panel tab-D">Content-D</div>
43            <div class="panel tab-E">Content-E</div>
44            <div class="panel tab-F">Content-E</div>
45            <div class="panel tab-G">Content-E</div>
46            <div class="panel tab-H">Content-E</div>
47            <div class="panel tab-I">Content-E</div>
48            <div class="panel tab-J">Content-E</div>
49            <div class="panel tab-K">Content-E</div>
50            <div class="panel tab-L">Content-E</div>
51            <div class="panel tab-M">Content-E</div>
52            <div class="panel tab-N">Content-E</div>
53            <!-- <div class="panel tab-F">Content-D</div>
54            <div class="panel tab-G">Content-D</div>
55            <div class="panel tab-H">Content-D</div>
56            <div class="panel tab-I">Content-D</div>
57            <div class="panel tab-J">Content-D</div> -->
58        </div>
59        <div class="footer">
60            <h1>SNS</h1>
61            <div class="sns">
62                <ul>
63                    <li>
64                        <a href=""><img src="images/instagram-3814048__480.webp" alt=""></a>
65                    </li>
66                    <li>
67                        <a href=""><img src="images/facebook-2935402__480.webp" alt=""></a>
68                    </li>
69                    <li>
70                        <a href=""><img src="images/twitter.webp" alt=""></a>
71                    </li>
72                </ul>
73            </div>
74        </div>
75    </div>
76
77    <script src="main.js"></script>
78</body>
79</html>

css
1@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol:wght@500&display=swap');
2*
3{
4    margin: 0;
5    padding: 0;
6    box-sizing: border-box;
7    font-family: 'Kaisei Decol', serif;
8}
9body
10{
11    background-image: url(images/architecture-5353157_960_720.jpg);
12    /* width: 100%; */
13    position: fixed;
14}
15.tab-group
16{
17    display: flex;
18    overflow-x: scroll;
19    margin: 5px 50px;
20    background-color: rgba(66, 66, 66, 0.437);
21    border-radius: 5px;
22    width: 70%;
23    margin-left: auto;
24
25}
26.tab
27{
28    cursor:pointer;
29}
30.panel
31{
32    display:none;
33}
34.tab.is-active
35{
36    transition: all 0.2s ease-out;
37    background-color: aliceblue;
38    border-radius: 5px;
39    padding: 10px;
40}
41.panel.is-show
42{
43    display:block;
44}
45.header
46{
47    display: flex;
48    background-image: url(images/art-6626881_1280.png);
49    background-size: cover;
50    width: 100%;
51    height: 65px;
52}
53.header .logo
54{
55    font-size: 25px;
56    margin: 5px 10px;
57    background-color: rgba(255, 140, 95, 0.696);
58    padding: 10px;
59    border-radius: 5px;
60}
61.header li
62{
63    margin: auto 20px;
64    white-space:nowrap;
65}
66.header ul::-webkit-scrollbar
67{
68    display: none;
69}
70
71
72
73
74
75
76
77.footer
78{
79    background-image: url(images/img1.webp);
80    background-size: cover;
81}
82.footer ul
83{
84    display: flex;
85    justify-content: center;
86}
87.footer h1
88{
89    padding: 20px;
90    font-size: 25px;
91    text-align: center;
92}
93.footer img
94{
95    width: 70px;
96    border-radius: 5px;
97    margin: 20px;
98}

javascript
1document.addEventListener('DOMContentLoaded', function(){
2	// タブに対してクリックイベントを適用
3	const tabs = document.getElementsByClassName('tab');
4	for(let i = 0; i < tabs.length; i++) {
5		tabs[i].addEventListener('click', tabSwitch);
6	}
7
8	// タブをクリックすると実行する関数
9	function tabSwitch(){
10		// 引数で指定したセレクターと一致する直近の祖先要素を取得
11		const ancestorEle = this.closest('.tab-panel');
12		// タブのclassの値を変更
13		ancestorEle.getElementsByClassName('is-active')[0].classList.remove('is-active');
14		this.classList.add('is-active');
15		// コンテンツのclassの値を変更
16		ancestorEle.getElementsByClassName('is-show')[0].classList.remove('is-show');
17		const groupTabs = ancestorEle.getElementsByClassName('tab');
18		const arrayTabs = Array.prototype.slice.call(groupTabs);
19		const index = arrayTabs.indexOf(this);
20		ancestorEle.getElementsByClassName('panel')[index].classList.add('is-show');
21	};
22});