Javascript 如何在HTML/CSS网格中添加固定的侧栏？

我是一个学习网络开发的学生，我现在正在建立一个网站！所以基本上，我正在尝试做一些类似于mit.edu的东西，右边滚动，而左边保持不变。我在W3Schools上找到了关于如何做类似事情的文章，我想我可以用我的“左”div替换“侧栏”，并增加它的大小。然而，我在这方面有很多困难

*{
保证金：0；
框大小：边框框；
}
/*网格容器*/
.网格容器{
高度：100vh；
显示：网格；
网格模板区域：
“左-右”
“右页脚”；
} 
.表格项目{
}
.左{
网格区域：左侧；
填充顶部：100px；
左侧填充：20px；
右边填充：20px；
垫底：20px；
背景色：#ccc；
最大宽度：45em；
单词包装：打断单词；
身高：100%；
位置：固定；
}
#欢迎留言{
字体系列：世纪哥特式，无衬线；
颜色：白色；
字体大小：20px；
填充：20px；
}
.搜索栏{
填充：20px；
宽度：100%；
显示：内联flex；
证明内容：中心；
}
.搜索输入{
flex：生长1；
填充：10px；
大纲：无；
边框：1px纯紫色；
边界半径：5px 0 5px；
背景：白色；
过渡：背景0.25s，框影0.25s；
宽度：75%；
高度：5vh；
}
.searchbarinput：焦点{
背景：白色；
盒影：0.02倍紫色；
}
.searchbarinput:：占位符{
颜色：紫色；
}
.搜索按钮{
宽度：40px；
背景：紫色；
颜色：白色；
大纲：无；
边界：无；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边界半径：0 5px 5px 0；
光标：指针；
用户选择：无；
}
.searchbarbutton：活动{
盒影：插入0.30px rgba（0,0,0,0.25）；
}
.对{
网格区域：右；
填充顶部：100px；
网格模板区域：
“公告”
“英雄”
“广告语”
“条款”；
背景色：黑色；
溢出：自动；
位置：绝对位置；
右：0；
宽度：50%；
}
#公告文本{
字体系列：世纪哥特式，无衬线；
颜色：红色；
填充：20px；
字体大小：20px；
填充：20px；
}
#英雄{
背景图片：url（“images/horse.jpg”）；
高度：100vh；
宽度：100%；
}
#模糊文本{
字体系列：世纪哥特式，无衬线；
颜色：白色；
字体大小：40px；
填充：20px；
}
.文章{
字体系列：世纪哥特式，无衬线；
颜色：白色；
字体大小：40px；
填充：20px；
}
#文章文本{
字体系列：世纪哥特式，无衬线；
颜色：白色；
字体大小：40px；
垫底：20px；
左侧填充：10px；
}
#第1条、第2条、第3条、第4条、第5条、第6条、第7条、第8条、第9条、第10条{
边框：3倍纯白；
颜色：白色；
填充：10px；
}
#第1条：悬停，第2条：悬停，第3条：悬停，第4条：悬停，第5条：悬停，第6条：悬停，第7条：悬停，第8条：悬停，第9条：悬停，第10条：悬停{
背景颜色：紫色；
}
a:链接{
文字装饰：无；
颜色：黑色；
}
a:参观了{
颜色：黑色；
}
a:主动的{
颜色：黑色；
}
.页脚{
网格区域：页脚；
背景色：#ccc；
身高：100%；
位置：固定；
}
navbar先生{
字体系列：世纪哥特式，无衬线；
背景色：#333；
位置：固定；
排名：0；
宽度：100%；
显示器：flex；
证明内容：中心；
过渡：前0.3名；
填充：20px；
z指数：1；
}       
.标志{
宽度：3em；
高度：3em；
}
纳瓦尔先生{
浮动：左；
显示：块；
颜色：白色；
文本对齐：居中；
填充：15px；
文字装饰：无；
}
.导航栏a:悬停{
文字装饰：下划线；
文本下划线偏移量：8px；
}
.卡片{
高度：20vh；
显示：网格；
网格模板区域：
“会员卡facebook卡”
‘捐赠卡租赁卡’；
间隙：2米；
填充：30px；
}
#会员卡、#facebook卡、#捐赠卡、#租赁卡{
文本对齐：居中；
字体大小：20px；
字体大小：粗体；
填充：20px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2）；
过渡：0.3s；
边界半径：5px；
}
#会员卡：hover，#facebook卡：hover，#捐赠卡：hover，#租赁卡：hover{
盒影：0.16px 32 px 0 rgba（0,0,0,0.2）；
}
.集装箱{
填充：2x16px；
}
#意识到{
字体大小：50px；
颜色：紫色；
}
#小广告{
文本对齐：居中；
字体大小：15px；
字体大小：正常；
}
p{
字体大小：40px；
}][1]

麋鹿海狸湖马术协会
height: 100%;
position: fixed;

width: 50%;
position: absolute;
right: 0;

z-index: 1