コンテンツだけを横にスライドさせたい

###前提・実現したいこと
サイドバーと背景を固定してコンテンツだけを横にスライドしてページが移動できるようなサイトが作りたいです。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>サンプル</title>
6<meta name="viewport" content="width=device-width, initial-scale=1.0">
7<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
8<link rel="stylesheet" href="css/reset.css">
9<link rel="stylesheet" href="css/style.css">
10</head>
11<body>
12
13<section class="conA">
14<div class="container">
15	<h1>TEXT</h1>
16	<p>TEXT<br>TEXT<br><span class="textcolor">TEXT</span></p>
17	<a class="send" href="#">SEND</a>
18	<a class="cantact" href="#">CONTACT</a>
19</div>
20	<header>
21		<nav>
22			<ul>
23				<li><a href="#">About</a></li>
24				<li><a href="#">Works</a></li>
25				<li><a href="#">Youtube</a></li>
26				<li><a href="#">Contact</a></li>
27			</ul>
28		</nav>
29	</header>
30</section>
31
32
33</body>
34</html>
35
36```CSS
37@charset "UTF-8";
38
39
40/* 基本設定： ページ全体 */
41body {
42	margin: 0;
43	font-family: 'メイリオ',
44		'Hiragino Kaku Gothic Pro', 
45		sans-serif;
46}
47
48
49/* コンテンツA： ヒーローイメージ */
50.conA {
51	display: flex;
52	align-items: center;
53	justify-content: center;
54	height: 100vh;
55	min-height: 450px;
56	background: #6DBEDB;
57	background-position: center;
58	background-size: cover;
59	color: #fff;
60	text-align: center;
61	position: relative;
62}
63
64.container {
65	position: relative;
66}
67.conA h1 {
68	margin-top: 0;
69	margin-bottom: 10px;
70	font-size: 10vw;
71	letter-spacing: 0.2em;
72	margin-left: 0.2em;
73}
74
75.conA p {
76	margin-top: 0;
77	margin-bottom: 0;
78	font-size: 18px;
79}
80.textcolor {
81	color:#C13133;
82	font-weight: bold;
83	font-size: 40px;
84	text-decoration: underline;
85}
86
87
88.send, .cantact {
89	width: 20%;
90	display: inline-block;
91	margin-top: 30px;
92	padding: 10px 30px;
93	border: solid 3px currentColor;
94	border-radius: 6px;
95	color: #fff;
96	font-size: 14px;
97	font-weight: bold;
98	text-decoration: none;
99}
100
101
102.conA a:hover	{
103	background-image: linear-gradient(
104		rgba(255,255,255,0.2),
105		rgba(255,255,255,0.2)
106	);
107}
108
109
110@media (min-width: 768px) {
111	.container {
112		max-width: 1700px;
113		margin-right: auto;
114		margin-left: auto;
115	}
116	.conA h1 {
117		font-size: 115px;
118	}
119
120	.conA p {
121		font-size: 34px;
122	}
123}
124
125header {
126	height: 100vh;
127	background-color: rgba(0,0,0,0.3);
128	width: 15%;
129	position: absolute;
130	left: 0px;
131	display: flex;
132	justify-content: center;
133	align-items: center;
134	overflow: hidden;
135}
136
137
138
139header ul {
140	font-size: 28px;
141}
142
143header ul li a {
144	padding: 10px 30px;
145	display: inline-block;
146	margin-bottom: 30px;
147	text-decoration: none;
148	color: #fff;
149	border-radius: 10px;
150}
151
152@media (max-width: 997px) {
153	header {
154		display: none;
155	}
156}
157
158