html和css响应设计没有按我想要的方式调整div的大小

我正在制作一个只使用HTML和CSS的网站。我的网站目前看起来像。不要理会那些断章取义的文字，因为它们不是我的问题

标题和导航栏（垂直排列的颜色块）是固定位置，最右边的div是我命名的。内容可以滚动

问题是，每当我试图调整我的网站的大小，使它变得更小，div就会不合适，而不是我想要的方式。它看起来像是在调整大小之后。避免使用断字，它们不是问题所在。问题是导航栏（我将其命名为.nav）没有粘附到header div（我将其命名为.header）上

这是我的HTML代码：

/*整个网站*/
身体
{
背景：#E3AB42；
边际上限：0px；
左边距：0px；
}
/*盒子尺寸*/
* {
框大小：边框框；
}
/*关于标题的所有内容*/
.标题{
背景色：#060606；/*666*/
身高：100%；
位置：固定；
}
.标题img{
左边距：25px；
边缘顶部：20px；
}
.标题p{
变换：旋转（270度）；
颜色：白色；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
}
.标题.标题{
边缘顶部：220px；
左边距：-150px；
显示：内联块；
字号：88px；
}
.标题.潜台词{
显示：内联块；
文本对齐：右对齐；
利润上限：-300px；
右边距：-55px；
字体大小：33px；
空白：nowrap；
}
/*导航通用代码*/
.导航{
位置：固定；
身高：100%；
左边距：225px；
}
.导航部{
身高：20%；
填充：0；
}
.nav p{
颜色：白色；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
字体大小：33px；
变换：旋转（270度）；
文本对齐：居中；
显示：内联块；
}
a:链接{
文字装饰：无；
}
/*导航垂直文本
#垂直新手{
利润上限：73px；
}
#垂直技巧{
边缘顶部：65px；
}
#垂直英雄{
利润上限：78px；
}
#垂直针{
利润上限：85px；
}
#垂直队{
边缘顶端：59px；
}
/*导航按钮颜色*/
.新手{
背景：#E3AB42；
}
.技能{
背景：#FAA02E；
}
.英雄{
背景：#B17C3B；
}
.心态{
背景：#584F4A；
}
.团队{
背景:#2F2526；
}
/*一般内容*/
.content{
宽度：70%；
高度：自动；
}
/*.content#示例{
浮动：对；
高度：自动；
宽度：25%；
}
/*页面颜色*/
body#pagenewbie{
背景：#E3AB42；
}
身体技能{
背景：#FAA02E；
}
正文#页英雄{
背景：#B17C3B；
}
身体{
背景：#584F4A；
}
身体#PageTeam{
背景:#2F2526；
}
/*内容文本*/
.内容h1{
文本对齐：居中；
颜色：白色；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
字体大小：66px；
}
李先生{
颜色：白色；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
字体大小：33px；
字体大小：粗体；
列表样式类型：无；
}
.内容p{
列表样式类型：无；
文字装饰：无；
颜色：白色；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
字体大小：22px；
}
/*盘旋*/
#下拉菜单：悬停范围{
显示：块；
字体大小：13px；
高度：自动；
宽度：200px；
颜色：白色；
字母间距：1px；
文本对齐：左对齐；
填充：5px20px；
位置：绝对位置；
利润上限：-40px；
左边距：880px；
字体系列：Optima，“时代新罗马”，佐治亚州，衬线；
}
body#pagenewbie#下拉列表：悬停范围{
背景：#E6B355；
边框：5px实心#C19138；
}
body#pageskill#下拉列表：悬停范围{
背景：#FAAA43；
边框：5px实心#D48827；
}
body#pageheroes#下拉列表：悬停范围{
背景#B9894F；
边框：5px实心#966932；
}
正文#页面心态#下拉列表：悬停范围{
背景：#69615C；
边框：5px实心#4B433F；
}
正文#页面团队#下拉列表：悬停范围{
背景：#443B3C；
边框：5px实心#281F20；
}
#下拉列表{
颜色：#E6；
}
#infoone{
显示：无；
}
/*网格盒*/
.col-1{宽度：8.33%；}
.col-2{宽度：16.66%；}
.col-3{宽度：25%；}
.col-4{宽度：33.33%；}
.col-5{宽度：41.66%；}
.col-6{宽度：50%；}
.col-7{宽度：58.33%；}
.col-8{宽度：66.66%；}
.col-9{宽度：75%；}
.col-10{宽度：83.33%；}
.col-11{宽度：91.66%；}
.col-12{宽度：100%；}
[类别*=“列-”]{
浮动：对；
}

过顶
过顶

主要面向初学者和中级玩家

新手组
在游戏设置中
首先，在游戏设置中，这是一个带有可更改选项的菜单。。与任何其他游戏一样，您希望在玩游戏之前检查游戏中的设置。每个人都不一样，不同的人喜欢不同的环境。你可能需要尝试一下你的英雄（你可以扮演的角色），四处玩转，看看你需要改变什么。假设您知道需要更改的内容，您可以按escape进入选项菜单或进入游戏菜单屏幕，然后更改所需的设置

问题是您已经设置了

.nav.header {
   width: 225px;
}

body
{
    background: #E3AB42;
    margin-top: 0px;
    margin-left: 0px;
}

/* grid boxes */

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
    float: right;
}

.header {
    background-color: #060606;
    height: 100%;
    width:225px;
    position: fixed;
}