Html 按钮不在收割台下方

我一直在尝试做一个游戏，用户必须按下一个按钮，重定向到游戏页面

我是HTML/CSS新手，我希望按钮位于页眉下方，但按钮位于页眉的侧面

我尝试过在标题后使用

标记，尝试过使用

位置：固定

并指定顶部和底部高度（这起作用，但对于不同的屏幕大小，按钮移位了），尝试过更改

显示：块

，但没有任何效果

这是我的密码：

h{
颜色：rgb（0,0,0）；
文本阴影：1px 2px 5px黑色；
文本对齐：居中；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：30磅；
}
div{
文本对齐：居中；
身高：100%；
宽度：100%；
显示器：flex；
位置：固定；
对齐项目：居中；
证明内容：中心；
保证金：0；
填充：0；
}
.按钮{
浮动：左；
盒影：02px5px0rgba（0,0,0,0.2），02px5px0rgba（0,0,0,0.19）；
-webkit转换持续时间：0.4s；
/*狩猎*/
过渡时间：0.4s；
背景色：#97d9f3；
边框颜色：rgb（0，131，192）；
边框样式：实心；
颜色：黑色；
填充：15px 32px；
显示：块；
字体大小：16px；
}
.按钮：悬停{
背景色：rgb（90190236）；
}
身体{
文本对齐：居中；
身高：100%；
宽度：100%；
显示器：flex；
位置：固定；
对齐项目：居中；
证明内容：中心；
背景色：#84ceeb；
保证金：0；
填充：0；
}

答复
我是丹瑟先生
推荐人

当您使用

柔性方向：列时

在基于flex的父元素上，每个子元素都沿y轴渲染

h{
颜色：rgb（0,0,0）；
文本阴影：1px 2px 5px黑色；
文本对齐：居中；
字体系列：“泰晤士报新罗马”，泰晤士报，衬线；
字体大小：30磅；
}
div{
文本对齐：居中；
身高：100%；
宽度：100%；
显示器：flex；
位置：固定；
对齐项目：居中；
证明内容：中心；
保证金：0；
填充：0；
}
.按钮{
浮动：左；
盒影：02px5px0rgba（0,0,0,0.2），02px5px0rgba（0,0,0,0.19）；
-webkit转换持续时间：0.4s；
/*狩猎*/
过渡时间：0.4s；
背景色：#97d9f3；
边框颜色：rgb（0，131，192）；
边框样式：实心；
颜色：黑色；
填充：15px 32px；
显示：块；
字体大小：16px；
}
.按钮：悬停{
背景色：rgb（90190236）；
}
身体{
文本对齐：居中；
身高：100%；
宽度：100%；
显示器：flex；
位置：固定；
对齐项目：居中；
证明内容：中心；
背景色：#84ceeb；
保证金：0；
填充：0；
弯曲方向：列；/*已添加*/
}

答复
我是丹瑟先生
推荐人