CSSで文字を中央に寄せたい

前提・実現したいこと

HTMLの文字を中央に配置したい(ソースコード中のSETTINGという文字)のですが、右端にハンバーガーメニューがあるため微妙にずれてしまいます。このずれを修正したいです。

該当のソースコード

html
1<!DOCUTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="ytf-8">
5        <link rel="stylesheet" type="text/css" href="sample1css.css">
6        <title>sample1</title>
7        <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
8    </head>
9
10
11    <body>
12
13        <nav>
14            <div id="glaylayer"></div>
15            <ul id="slidemenu">
16                <li><a href="#">後々追加していくページ１</a></li>
17                <li><a href="#">２</a></li>
18                <li><a href="#">３</a></li>
19                <li><a href="#">４</a></li>
20            </ul>
21        </nav>
22
23        <div class="header">
24            <div class="container">
25                <main>
26                    <button id="hamburgerbtn">
27                        <span></span>
28                        <span></span>
29                        <span></span>
30                        <p>menu</p>
31                    </button>
32                </main>
33            </div>    
34        <div class="header-title">SETTING</div>
35        </div>
36
37    </body>
38</html>
39

css
1.header {
2    background-color:rgb(215, 255, 255);
3    height:86px;
4}
5#hamburgerbtn {
6	background: rgb(215, 255, 255);
7	color: rgb(0, 0, 0);
8	border: none;
9	padding: 16px 16px 0px;
10	cursor: pointer;
11    float: right;
12}
13#hamburgerbtn span {
14	display: block;
15	width: 36px;
16	height: 4px;
17	background: rgb(0, 0, 0);
18	border-radius: 4px;
19	margin-bottom: 8px;
20}
21
22#slidemenu {
23	display: none;
24	position: fixed;
25	top: 0;
26	width: 70%;
27	max-width: 400px;
28	height: 100%;
29	background: #333;
30	list-style: none;
31}
32#slidemenu a {
33	display: block;
34	color: #fff;
35	text-decoration: none;
36	padding: 20px;
37}
38#slidemenu a:hover, #slidemenu a:active {
39	background: #666;
40}
41#glaylayer {
42	position: fixed;
43	display: none;
44	top: 0;
45	left: 0;
46	width: 100%;
47	height: 100%;
48	background: #000;
49	opacity: 0.3;
50}
51
52.header-title{
53    font-size: 36px;
54    text-align:center;
55  	padding:20px 0
56}
57

javascript
1$(function(){
2
3	//ハンバーガーボタンをクリックしたときの処理
4	$('#hamburgerbtn').click(function(){
5		$('#glaylayer:not(:animated)').fadeIn('fast');
6		$('#slidemenu:not(:animated)').css({
7			'right' : -1*$('#slidemenu').width(),
8			'display' : 'block'	
9		}).animate({
10			'right' : 0
11		},'fast');
12	});
13	
14	//背景をクリックしたときの処理
15	$('#glaylayer').click(function(){
16		$('#glaylayer:not(:animated)').fadeOut('fast');
17		$('#slidemenu:not(:animated)').animate({
18			'right' : -1*$(this).width()
19		},'fast',function(){
20			$(this).css({
21				'display' : 'none'	
22			});
23		});
24	});
25	
26});
27
28

試したこと

該当の箇所はcssファイル内の「.header-title{~}」の部分ですが、添付したコードでは図のようになってしまいます。
実際はもう少し右にSETTINGの文字を移動させたいです。

###追記
一応中央に寄せる方法として

css
1.header {
2  position: relative;
3  background-color:rgb(215, 255, 255);
4  height:86px;
5}
6
7.header-title {
8  font-size: 36px;
9  position: absolute;
10  top: 50%;
11  left: 50%;
12  -webkit-transform : translate(-50%,-50%);
13  transform : translate(-50%,-50%);
14  width: 100px;
15}

といったものも試してみましたがこの場合も微妙にずれたままで、更に「.header{~}」でposition: relative;としたため、ハンバーガーメニューを開いたときにメニューではなくヘッダーが最前面に出てきてしまいました。
ですので最初に示したコードになっているのですがずれているといった状態です。

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

回答1件

ベストアンサー

ハンバーガーメニューの幅を無視して、テキストを全体の中央寄せしたいということですね。
だとしたらハンバーガーメニューを絶対配置すればいいでしょう。

slidemenu の前後位置は z-index で調整します。

css
1#hamburgerbtn {
2    background: rgb(215, 255, 255);
3    color: rgb(0, 0, 0);
4    border: none;
5    padding: 16px 16px 0px;
6    cursor: pointer;
7/*    float: right; */
8    position: absolute; /* 追加 */
9    right: 0;           /* 追加 */
10}
11
12#slidemenu {
13    display: none;
14    position: fixed;
15    top: 0;
16    width: 70%;
17    max-width: 400px;
18    height: 100%;
19    background: #333;
20    list-style: none;
21    z-index: 1;        /* 追加 */
22}