Html 如何放置手风琴中心和底部的横幅

我必须在页眉上方放置一个手风琴，手风琴应该朝向页眉的底部和中心放置

我想像这样的桌面视图，它应该是响应

标题{
填料：2米；
背景色：#b0b6de；
高度：100px；
}
导航{
背景色：白色；
文本对齐：居中；
保证金：0自动；
}
链接{
列表样式类型：无；
填充：4px；
显示：-webkit内联框；
保证金：0px自动；
}
李连杰{
边框：1px实心；
填充：3rem 3rem；
最小宽度：150px；
}

测试
测试
测试测试
测试测试
测试测试

您可以使用以下示例：

*，*：之前，*：之后{
保证金：0；
填充：0；
}
身体{
宽度：100vw；
位置：相对位置；
}
.包装纸{
位置：相对位置；
}
标题{
填充：2em 0；
背景色：#b0b6de；
高度：100px；
位置：相对位置；
宽度：100vw；
}
导航{
文本对齐：居中；
宽度：100%；
保证金：-70px自动0自动；
z指数：2；
位置：相对位置；
}
链接{
列表样式类型：无；
填充：4px；
显示：-webkit内联框；
保证金：0px自动；
显示器：flex；
证明内容：中心；
最大宽度：800px；
背景：#fff；
}
李连杰{
边框：1px实心；
填充：3rem20px；
最大宽度：150px；
弹性：1；
}

测试
测试
测试
测试
测试

谢谢您的回复。但导航不应在收割台内/wrapper@DivyaMaruthappan，请检查我的更新代码。谢谢：）