Javascript 如何解决屏幕缩小时出现的内容重新定位问题？

我目前正在做一个项目，为钢琴销售制作一个网站，我遇到了一些问题。首先，当屏幕尺寸减小时，我的导航列表会以列的方向进行包装，这使得它看起来非常难看。我希望他们不要把自己包裹起来，即使屏幕缩小了，也要保持原样。第二，同样当屏幕尺寸减小时，文件中的内容也会被打开。如何解决这些问题

@font-face{
字体系列：“鸟恋”；
src:url（./font-face/Birdlove.ttf）格式（'truetype'）；
}
身体{
保证金：0；
溢出x：隐藏；
}
h1{
字体系列：“Oswald”，无衬线；
字体大小：75px；
颜色：白色；
边缘底部：20px；
}
.容器背景图像{
背景色：黑色；
背景尺寸：封面；
}
斯潘·霍姆{
字体大小：74px；
字体系列：“鸬鹚SC”，衬线；
左边距：20px；
填充顶部：10px；
}
跨度a{
文字装饰：无；
颜色：贝壳；
}
标题{
高度：80px；
显示器：flex；
对齐项目：居中；
宽度：100%；
边框底部：0.5px实心rgba（255、255、255、0.3）；
}
收割台img{
身高：80%；
宽度：自动；
左边距：10px；
}
导航{
柔性生长：1；
右边距：10px；
}
导航ul{
文本对齐：右对齐；
}
李海军{
显示：内联块；
}
海军a连：悬停{
背景：rgba（0,0,0,0.3）；
颜色：白色；
边界半径：5px；
过渡：放松0.5s；
}
导航a{
显示：块；
文字装饰：无；
颜色：白色；
字体大小：粗体；
填充：30px 20px；
}
.搜索{
显示器：flex；
对齐项目：居中；
}
.搜索img{
高度：40px；
右边填充：10px；
}
.使命{
宽度：100%；
高度：100vh；
}
.任务文本{
填充：200px 100px 0 100px；
}
.任务文本p{
宽度：638px；
颜色：白色；
字体系列：“四分之一世纪无”，无衬线；
字号：26px；
边际上限：0px；
边框顶部：1px纯白；
填充顶部：20px；
显示：内联块；
}
.mission.btn更多{
边缘顶部：100px；
文本对齐：居中；
}
.mission.btn更多信息a{
填充：15px 40px；
边框：2倍纯白；
颜色：白色；
背景：rgba（0,0,0,0.3）；
文字装饰：无；
字体系列：“四分之一世纪无”，无衬线；
边界半径：5px；
框阴影：嵌入0白色；
过渡：缓进缓出0.3s；
}
更多信息a:悬停{
颜色：黑色；
盒影：嵌入150px 0白色；
字号：700；
}
.产品{
高度：100vh；
边缘顶部：100px；
}
.产品h1{
颜色：黑色；
字体系列：“Shippori Mincho”，衬线；
字号：700；
文本对齐：居中；
}
.产品h2{
文本对齐：居中；
}
.产品.图像背景h2{
背景图片：url（“./img/img piano small.jpg”）；
背景尺寸：封面；
填充：39.5%0；
利润率：0.5%；
光标：指针；
不透明度：0.8；
颜色：白色；
过渡：在0.3s内轻松过渡；
}
.产品.图像背景h2:悬停{
不透明度：1；
}
.图像库{
显示器：flex；
证明内容：中心；
对齐项目：居中；
填充顶部：100px；
}
.产品.形象{
宽度：23%；
身高：22%；
}
.图像img{
宽度：90%；
显示：块；
保证金：0自动；
光标：指针；
}
.人{
高度：100vh；
}
.人h1{
颜色：黑色；
文本对齐：居中；
}

最好的钢琴收藏。
斯坦威父子公司、雅马哈、法齐奥利、卡威等

产品。
史坦威公司
雅马哈
法齐奥利
卡瓦
我们队。

nav{
隐藏的
}  
导航a：{
显示：块，水平；
文字装饰：无；
颜色：白色；
字体大小：粗体；
填充：30px 20px；
}

谢谢你的回答，这在我的笔记本电脑中不起作用，我不知道为什么。。