2カラムレイアウトでスクロール時にナビゲーションがついてくるようにしたい

２カラムレイアウトでの縦並びのナビゲーションバーを
スクロール時に画面に固定された状態でついてくるようにしたいのですが、
うまくいきません。
※現行のコードをサイト表示した際の枠組みを下記に添付いたしました。
赤文字でnavと書いてある箇所をスクロールをした時もついてくるように
指定したいです。

試したこととして、position:stickyやposition:fixedを指定してみましたが、
うまくいきませんでした。

使用ソースコードエディタ：Brackets1.14最新版

CSSコードを添付いたしました。
お手数おかけしますが、よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>●○○○○●○○○○●○○○○</title>
6        <link rel="stylesheet" href="style.css">
7    </head>
8    <body>
9        <div class="twocolumn-wrapper">
10            <div class="container">
11                <div class="wrapper">
12                    <nav class="side">
13                        <a href="#"><img class="logo-img"  src="●○○○○●○○○○●○○○○"></a>
14                        <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a>
15                        <p>●○○○○●○○○○●○○○○</p>
16                        <div class="border"></div>
17                        <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a>
18                        <p>●○○○○●○○○○●○○○○</p>
19                        <div class="border"></div>
20                        <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a>
21                        <p>●○○○○●○○○○●○○○○</p>
22                        <div class="border"></div>
23                        <a href="#"><img class="menu-img" src="●○○○○●○○○○●○○○○"></a>
24                        <p>●○○○○●○○○○●○○○○</p>
25                        <div class="border"></div>
26                    </nav>
27                    <main class="main">
28                        <img class="main-img" src="●○○○○●○○○○●○○○○">
29                        <div class="heading">
30                            <h2 class="heading-tokucho">｜　●○○○○●○○○○●○○○○　｜</h2>
31                        </div>
32                        <article class="archive">
33                            <img src="●○○○○●○○○○●○○○○">
34                                <section>
35                                    <h3>●○○○○●○○○○●○○○○</h3>
36                                    <p>●○○○○●○○○○●○○○○</p>
37                                    <a>●○○○○●○○○○●○○○○</a>
38                                </section>
39                                <section>
40                                    <h3>●○○○○●○○○○●○○○○</h3>
41                                    <p>●○○○○●○○○○●○○○○</p>
42                                    <a>●○○○○●○○○○●○○○○</a>
43                                </section>
44                                <img src="●○○○○●○○○○●○○○○">
45                        </article>
46                    </main>
47                </div>
48            </div>
49        </div>
50    </body>
51</html>

CSS
1body {
2    margin: 0;
3    font-family: "Hiragino Mincho ProN";
4}
5a {
6    text-decoration: none;
7}
8.container {
9    width: 1170px;
10    margin: 0 auto;
11}
12.wrapper {
13    width: 100%;
14    display: flex;
15    justify-content: space-between;
16}
17.side {
18    width: 8%;
19    margin-right:5%;
20    position: sticky;
21    top: 0;
22    text-align: center;
23}
24.main {
25    width: 87%;
26}
27.logo-img {
28    width: 90px;
29    padding: 30px 0;
30    border-bottom: 1px solid #b4b4b4;
31}
32.menu-img {
33    width: 80%;
34    padding-top: 25px;
35}
36.side p {
37    margin-top: 0;
38    font-size: 16px;
39    letter-spacing: 4px;
40    font-weight: bold;
41    text-align: center;
42}
43.border {
44    border-bottom: 1px solid #b4b4b4;
45    padding-top: 10px;
46}
47.main-img {
48    height: 765px;
49    object-fit: cover;
50    width: 100%;
51}
52.heading-tokucho {
53    text-align: center;
54    font-size: 26px;
55    font-weight: bold;
56    padding-top: 80px;
57    letter-spacing: 5px;
58}
59.archive {
60    display: flex;
61    flex-wrap: wrap;
62    justify-content: space-between;
63    padding: 50px 100px;
64}
65.archive section {
66    width: 50%;
67    padding-bottom: 200px;
68    text-align: center;
69}
70.archive h3 {
71    font-size: 18px;
72    letter-spacing: 5px;
73    padding: 25px 0 15px 0;
74}
75.archive p {
76    color: dimgrey;
77    letter-spacing: 4px;
78    line-height: 30px;
79    font-size: 14px;
80    text-align: justify;
81    padding-bottom: 40px;
82}
83.archive a {
84    padding: 20px 130px;
85    background-color: #8CC63F;
86    font-size: 16px;
87    font-weight: bold;
88    color: white;
89    letter-spacing: 5px;
90}
91.archive img {
92    width: 300px;
93    height: 300px;
94    object-fit: cover;
95    padding-top: 50px;
96} 
97

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

回答1件

ベストアンサー

css
1.side {
2    width: 8%;
3    margin-right:5%;
4    position: fixed; /* 修正 */
5    top: 0;
6    text-align: center;
7}
8.main {
9    width: 87%;
10    margin-left: 12%; /* .sideの幅+マージン */
11}