Html 我的div容器随着浏览器不断缩小

每当我缩小浏览器大小时，我所有的div也会调整大小，尽管网格列在那里，正如你所看到的，当它应该到达页面的末尾时，就像正常情况一样。我使用了CSS网格，除了这个问题，其他一切都很好，因为它会导致页面的部分变黑。当你访问网站（www.thegreatmurshed.co.uk）应该是这样的

下面是我的HTML和CSS页面

/*
字体系列：“安东”，无衬线-----------------大胆的
字体系列：“Fjalla One”，无衬线------------有规律的
*/
*{
保证金：0；
}
身体{
背景：黑色；
}
.标志{
字体大小：40px；
字体系列：“安东”，无衬线；
颜色：#ffc800；
线高：100px；
}
.标题{
网格面积：高清；
高度：自动；
}
.标题{
显示：网格；
网格模板列：700px 250px 250px 250px 250px自动；
网格模板行：95px；
网格模板区域：“hd”；
字体系列：“安东”，无衬线；；
字体大小：30px；
边缘底部：20px；
边框底部：2个实心#ffc800；
}
.标题{
背景：黑色；
}
.标题a{
颜色：#ffc800；
文字装饰：无；
线高：100px；
}
.hme{
网格列开始：2；
}
维兹先生{
网格列开始：3；
}
.标题a：悬停{
-webkit过渡：所有易入易出；
-moz转换：所有易入易出；
-ms转换：所有输入输出都很容易；
-o型过渡：所有的易进易出；
过渡：一切都很轻松；
颜色：透明；
文本阴影：0 1px rgba（255255255,0.9），2px 0px 0px#00FFD7，-1px 0px 0px#FF0000；
填充：0-1px；
}
/*----------------------------------------------------------------*/
梅因先生{
网格面积：mn；
}
梅因先生{
显示：网格；
网格模板柱：250px 500px 1fr 1fr；
网格模板行：400px 400px；
网格模板区域：“mn-mn”；
颜色：白色；
边缘底部：50px；
}
录像带{
背景：url（./clientback3）；
溢出：自动；
}
.其他{
颜色：#ffc800；
字体系列：“安东”，无衬线；
字体大小：100px；
线高：700px；
z指数：2；
网格列开始：2；
网格柱端：4；
最小宽度：646.5px；
}
阿特南先生{
颜色：#ffc800；
字体系列：“安东”，无衬线；
字体大小：50px；
网格列开始：2；
网格柱端：4；
z指数：1；
最小宽度：615.5px；
}
.mnvid:悬停{
自动播放：1；
}
/*-------------------------------------------------------------*/
.介绍{
网格面积：int；
}
.介绍{
显示：网格；
网格模板列：120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px 120px；
网格模板行：20px 60px 50px 250px 80px；
颜色：#ffc800；
背景：url（./clientback3.jpg）；
}
.vpap{
网格列开始：1；
网格柱端：17；
网格行开始：2；
字体系列：“安东”，无衬线；
字体大小：50px；
文本对齐：居中；
文字装饰风格：下划线；
垫底：20px；
}
阿卜丁夫先生{
字体系列：“Fjalla One”，无衬线；
网格行开始：4；
网格列开始：2；
网格柱端：15；
字体大小：25px；
}
/*-----------------------------------------------------------*/
.recproc{
网格区域：rcp；
}
.recproc{
显示：网格；
网格模板列：250px 360px 360px 360px 360px；
栅柱间隙：50px；
网格模板行：自动；
颜色：#ffc800；
字体系列：“安东”，无衬线；
字体大小：25px；
背景图片：url（projback.jpg）；
}
projtitle先生{
网格列开始：3；
文本对齐：居中；
边缘底部：20px；
颜色：#ffc800；
字体系列：“安东”，无衬线；
}
firstvid先生{
网格列开始：2；
边缘底部：50px；
}
塞维德先生{
网格行开始：2；
网格列开始：3；
边缘底部：50px；
}
thrdvid先生{
网格行开始：2；
网格列开始：4；
边缘底部：50px；
}
弗斯维德先生{
网格行开始：3；
网格列开始：2；
边缘底部：50px；
}
.fthvid{
网格行开始：3；
网格列开始：3；
边缘底部：50px；
}
斯特维德先生{
网格行开始：3；
网格列开始：4；
边缘底部：50px；
}
/*---------------------------------------------*/
怀斯先生{
显示：网格；
网格模板列：300px 150px 250px 250px 250px 250px 250px；
网格模板行：自动75px；
背景：url（./clientback3.jpg）；
字体系列：“安东”，无衬线；
颜色：#ffc800；
}
维尤斯蒂特先生{
网格列开始：2；
填充顶部：50px；
字体大小：50px；
垫底：25px；
}
.whyusinfop1{
网格行开始：2；
网格列开始：2；
网格柱端：6；
字体大小：25px；
垫底：20px；
字体系列：“Fjalla One”，无衬线；
}
.whyusinfop2{
网格行开始：3；
网格列开始：2；
网格柱端：6；
字体大小：25px；
垫底：35px；
字体系列：“Fjalla One”，无衬线；
}
布特康特先生{
网格行开始：4；
网格列开始：2；
字体大小：25px；
颜色：黑色；
文字装饰：无；
边界：2px#2a2a；
背景：#2a2a；
颜色：白色；
边界半径：6px；
颜色：#ffc800；
}
.butcont:悬停{
-webkit过渡：所有易入易出；
-moz转换：所有易入易出；
-ms转换：所有输入输出都很容易；
-o型过渡：所有的易进易出；
过渡：一切都很轻松；
颜色：透明；
文本阴影：0 1px rgba（255255255,0.9），2px 0px 0px#00FFD7，-1px 0px 0px#FF0000；
填充：0-1px；
边框：2px#ffc800；
背景：#ffc800；
}
/*------------------------------------------------*/
.页脚{
显示：网格；
网格模板列：250px 75px 250px 250px 250px 250px自动1fr；
网格模板行：100px 60px 100px；
背景：黑色；
颜色：#ffc800；
字体系列：“安东”，无衬线；
边框顶部：2个实心#ffc800；
}
.跟随{
网格列开始：2；
边缘顶部：25px；
}
.instalogo{
网格列开始：2；
网格行开始：2；
高度：自动；
宽度：50px；
}
英萨特先生{
网格行开始：2；
网格列开始：3；
字体大小：25px；
边缘顶部：15px；
字体系列：“Fjalla One”，无衬线；
}
戴比先生{
网格列开始：7；
边缘顶部：25px；
}
jbdevlgo先生{
高度：自动；
宽度：500px；
网格列开始：7；
网格柱端：9；
网格行开始：2；
}

穆尔希德
这个