レイアウトが崩れてしまう

現在会社のHP制作を練習しているのですが、
ウィンドウを小さくしたり拡大縮小するとレイアウトが崩れてしまいます。
例えばヘッダーにナビメニューを付けているのですが
その文字が縦書きになったり、position:relativeで移動させたボタンが変な位置に行ったり、
行間が詰められたりです。
レスポンシブデザインで調べたんですが、スマホ対応のことについてしか出ませんでした。
拡大縮小でレイアウトが崩れるのもレスポンシブデザインなのでしょうか？
またやり方などを教えていただけますでしょうか。

ヘッダーのナビメニューとボタンのCSSを載せておきます。
よろしくお願いいたします。

CSS
1**ナビメニュー**
2ul#nav a {
3  list-style: none;
4  display: inline-block;
5  padding: 0.6em 2em;
6  margin: 0 0 1em;
7  color: #f0f0f0;
8  text-decoration: none;
9}
10.menu  li {
11  text-decoration: none;
12  display: block;
13}
14
15.menu li a {
16  display: inline-block;
17  transition: .3s;
18  -webkit-transform: scale(1);
19  transform: scale(1);
20}
21.menu li a:hover {
22  -webkit-transform: scale(1.1);
23  transform: scale(1.1);
24}
25
26ul#nav {
27  position: relative; top:25px;/*位置調整*/
28  margin-top: 0px;
29  margin-bottom: 0px;
30  display: flex;
31
32}
33
34
35
36**ボタン**
37.btn {
38	display: block;
39	position: relative; right: -940px; top:-100px;
40	width: 160px;
41	padding: 0.8em;
42	text-align: center;
43	background: #5d627b;
44}
45.btn:hover {
46	 opacity:0.8;
47	 cursor: pointer;
48	 text-decoration: none;
49}
50.btn a {
51  color: #fff;
52  text-decoration: none;
53}