使css下拉菜单响应

我试图使css下拉菜单根据浏览器窗口做出响应

我希望菜单文本根据浏览器窗口保持居中

请将此视频作为预期行为的示例：

/*-------------------------------------*/
/*基本设置*/
/* ------------------------------------------ */
* {
保证金：0；
填充：0；
框大小：边框框；
}
.换页{
宽度：1216px；
保证金：0自动；
}
/* ------------------------------------------ */
/*页面内容*/
/* ------------------------------------------ */
.box1{
高度：30px；
宽度：300px；
背景:"8242b1,；
}    
.box2{
高度：30px；
宽度：300px；
背景：#b14242；
}     
.box3{
高度：30px；
宽度：300px；
背景：#424bb1；
}      
.网页内容{
显示器：flex；
证明内容：中心；
过渡：缓进缓出0.3s；
位置：相对位置；
顶部：-260px；
z索引：0；}
.切换{
过渡：缓进缓出0.3s；
文字装饰：无；
字体大小：30px；
颜色：#eaeaea；
位置：相对位置；
顶部：-120px；
左：20px；
z-索引：1；}
.切换：悬停{
颜色：#中交；}
.侧边栏{
显示器：flex；
证明内容：中心；
对齐项目：居中；
过渡：缓进缓出0.3s；
位置：相对位置；
顶部：-220px；
底部：0px；
左：0px；
高度：220px；
宽度：自动；
填充：30px；
背景：#333；
z-索引：1；}
.侧边栏李{
显示器：flex；
证明内容：中心；
列表样式：无；
颜色：rgba（255,255,255,0.8）；
字体系列：“Lato”，无衬线；
字体大小：16px；
边缘底部：16px；
游标：指针；}
.侧边栏李：悬停{
颜色：rgba（255，255，255,1）；}
#边栏猎犬{
显示：无；}
#sidebartoggler:选中+.换页.侧边栏{
顶部：0px；}
#sidebartoggler:选中+.换页.切换{
顶部：100px；}
#sidebartoggler:选中+。换页。页面内容{
填充顶部：220px；}

家
计划
客户
博客
接触

☰

这样就行了

.page-wrap{
width:1216px;
}

+按如下方式使用媒体查询：

---

是的，它现在在中间，但是菜单现在被拉伸了100%，我想要保持1216px的宽度。你知道怎么做吗？非常感谢。你能提供一个小提琴吗？好吧，现在你能做它，所以它将保持1216px宽，而菜单文本保持居中根据浏览器窗口？页包装{宽：1216px；}，但文本不缩放在中间时，窗口是小的。

@media only screen and (max-width: 1216px) {

.page-wrap{
width: 100%;}

}