Javascript 为什么HTML布局会在769px处出现中断？

我正在用html/css编写一个基本的网页模板。导航代码是根据教程编写的

• 在769px时，布局中断，页面不是全宽，被隐藏。详情如下:

屏幕截图：

为什么布局会中断，我已经查看了导航代码？我找不到问题，请帮助请检查769px。

$（“#切换”）。单击（函数（）{
$（this.toggleClass（'on'）；
$（“#调整大小”）.toggleClass（“活动”）；
});
html{
字体大小：10px；
字体系列：“Courier New”、“Courier”、“monospace”；
}
身体{
字号：2.2rem；
}
秒{
填充：2.2rem；
}
/*
航行
*/
* {
保证金：0；
填充：0；
文字装饰：无；
列表样式：无；
}
身体{
宽度：100%；
高度：100vh；
背景：url（Hero.jpg）不重复50%50%；
背景尺寸：封面；
显示：表格；
}
.内容{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}
.内容h1{
颜色：#fff；
字体系列：“罂粟花”；
字号：200；
字体大小：40px；
}
导航{
宽度：100%；
背景：#000；
高度：70像素；
位置：静态；
z指数：1；
}
导航品牌{
浮动：左；
显示：块；
左边距：84px；
字体大小：30px；
线高：70px；
字体大小：粗体；
}
nav#品牌a{
颜色：#fff；
过渡：所有0.3秒放松；
字体系列：“罂粟花”；
字体大小：300；
}
导航菜单{
浮动：左；
左：50%；
位置：相对位置；
}
导航菜单{
显示：内联块；
填充：0px 30px；
光标：指针；
线高：70px；
位置：相对位置；
过渡：所有0.3秒放松；
}
导航菜单a{
颜色：#fff；
字体系列：“罂粟花”；
字号：200；
}
#拨动{
位置：绝对位置；
右：20px；
顶部：14px；
z指数：999；
宽度：40px；
高度：40px；
光标：指针；
浮动：对；
过渡：所有0.3秒放松；
可见性：隐藏；
不透明度：0；
}
#切换.span{
高度：3倍；
背景：#fff；
过渡：所有0.3秒放松；
背面可见性：隐藏；
保证金：5px自动；
}
#打开一个{
变换：旋转（45度）translateX（2倍）translateY（4倍）；
}
#打开#2{
不透明度：0；
}
#打开#三{
变换：旋转（-45度）translateX（8像素）translateY（-10像素）；
}
#调整大小{
z指数：1；
顶部：0px；
位置：绝对位置；
背景：#000；
宽度：100%；
身高：100%；
可见性：隐藏；
不透明度：0；
过渡：所有1都放松；
显示：表格；
}
#调整#菜单的大小{
高度：90px；
显示：表格单元格；
垂直对齐：居中；
}
#调整#菜单大小{
显示：块；
文本对齐：居中；
填充：20px0；
字体大小：50px；
最小高度：50px；
字体大小：粗体；
光标：指针；
过渡：所有0.3秒放松；
}
#调整li的大小：第n个子项（1）{
边缘顶部：140px；
}
#调整#菜单大小a{
颜色：#fff；
}
#调整大小。活动{
能见度：可见；
不透明度：0.99；
}
@介质（最大宽度：768px）{
#拨动{
能见度：可见；
不透明度：1；
边缘顶部：6px；
}
导航品牌{
左边距：18px；
}
#菜单a{
字体系列：“罂粟花”；
字号：200；
字体大小：20px；
}
导航菜单{
显示：无；
}
}
@介质（最小宽度：768px）{
#调整大小{
可见性：隐藏！重要；
}
}
/* 
英雄组
*/
.英雄包装{
背景色：#b072d4；
颜色：#ffffff；
高度：100vh；
}
#英雄偶像{
位置：绝对位置；
顶部：34.5雷姆；
不透明度：0.8；
宽度：100%；
右：0；
背景：右下角的url（'hero-icon-4.png'）；；
高度：300px；
背景重复：无重复；
}
#英雄图标按钮{
不透明度：1；
填充：1rem；
颜色：#fff；
字体大小：粗体；
字体大小：1.6rem；
背景色：黑色；
边界：无；
位置：相对位置；
左：30%；
排名前10%；
}
.hero wrap h1{
保证金：0；
左：4rem；
位置：相对位置；
顶部：10雷姆；
字体大小：3rem；
字体系列：“Courier New”，Courier，monospace；
}
.hero wrap h2{
字体系列：“Courier New”，Courier，monospace；
位置：相对位置；
顶部：12雷姆；
左：4rem；
字号：2rem；
}
/*
第一节
*/
.第1节{
显示器：flex；
弯曲方向：柱反向；
文本对齐：居中；
}
.第1排{
显示器：flex；
弯曲方向：柱反向；
保证金：2rem 0；
}
.第1节图像{
宽度：50%；
}
.行内容{
字体大小：1.6rem；
填充：2rem1rem；
}
/*
第二节
*/
.第2节{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
调整项目：灵活启动；
保证金：自动；
背景色：#00e8ff；
}
.第2节.图标img{
宽度：50%；
}
.图标框{
宽度：50%；
自对准：居中；
文本对齐：居中；
保证金：2rem；
填充：1rem；
背景色：#fff；
边框：10px实心#ffd434；
}

推特情感应用程序










nav #menu {
      float: right;
      /* float: left;
      left: 50%;
      position: relative; */
}