Html 网页布局正在崩溃

我花了大约4-5个小时的时间工作和学习构建这个页面，但我似乎无法找到为什么我无法获得与navbar徽标位于同一行的导航链接，其次，是否有任何方法可以使此代码更高效、更少依赖/出错

我想问的另一件事是，我们可以在这个网页中使用flexbox吗？这里使用的CSS动画是否有效

正文{
背景色：#000；
颜色：#f1f1；
动画：淡入2S1；
}
标题{
宽度：100%；
身高：10%；
保证金：自动；
}
.导航栏标志{
填充：2px 0px 2px 100px；
位置：绝对位置；
z指数：100；
}
.navbar徽标子组件{
填充：55px 0px 0px 200px；
}
#主标志{
字体系列：“Didact哥特式”，无衬线；
颜色：白色；
字体大小：40px；
字号：800；
保证金：0；
}
.括号1{
颜色：#b22121；
字体系列：“蹦极”，草书；
}
.括号2{
颜色：#787878；
字体系列：“蹦极”，草书；
}
#标识子{
颜色：白色；
字体大小：14px；
字号：20；
字体系列：“即将到来”，草书；
}
#横幅图像{
宽度：50%；
左：20%；
过滤器：模糊（3px）；
位置：相对位置；
垫面：5%；
}
#横幅文本{
最高：50%；
左：50%；
位置：固定；
转换：翻译（-50%，-50%）；
字体大小：50px；
文本对齐：左对齐；
}
导航{
填充：0px 0px 0px 60%；
}
李{
浮动：左；
右边距：100px；
列表样式类型：无；
}
a{
文字装饰：无；
颜色：白色；
}
h1{
边际上限：0px；
边缘底部：-50px；
字体系列：“永久标记”，草书；
字体大小：300；
文本阴影：4px2pRGBA（2382382380.5）；
不透明度：0；
-webkit动画：以3s 1向前滑动；
}
第h1部分：第N种类型（2）{
动画延迟：0.1s；
-webkit动画延迟：0.1s；
}
第h1部分：第N种类型（3）{
动画延迟：0.2s；
-webkit动画延迟：0.2s；
}
第h1部分：第N种类型（4）{
动画延迟：0.3s；
-webkit动画延迟：0.3s；
}
第h1部分：第N种类型（5）{
动画延迟：0.4s；
-webkit动画延迟：0.4s；
}
第h1部分：第N种类型（6）{
动画延迟：0.5s；
-webkit动画延迟：0.5s；
}
第h1部分：第N种类型（7）{
动画延迟：0.6s；
-webkit动画延迟：0.6s；
}
第h1部分：第N种类型（8）{
动画延迟：0.7s；
-webkit动画延迟：0.7s；
}
第h1部分：第N种类型（9）{
动画延迟：0.8s；
-webkit动画延迟：0.8s；
}
@关键帧滑入{
0%{
变换：旋转（90度）平移（-50%）；
不透明度：0.0；
}
100%{
变换：旋转（0度）平移（0%）；
不透明度：1.0；
}
}
@-webkit关键帧滑入{
0%{
-webkit变换：旋转（90度）平移（25%）；
不透明度：0.0；
}
100%{
-webkit变换：旋转（0度）平移（0%）；
不透明度：1.0；
}
}
@关键帧淡入{
0%{
不透明度：0.0；
}
50%{
不透明度：0.5；
}
100%{
不透明度：1.0；
}

.密码是什么。
代码是什么(
)
{htmlstylescript}





Yourweb开发
在这里发展。

兄弟，我用class=“navbar wrapper”添加了一个div并将标题元素放在其中。我在标题元素上使用了display:inline块，以便它们水平对齐。对于导航栏徽标子项，我将其放在导航栏徽标中，并使用position:absolute和bottom:0将其放在父元素的底部。运行代码段我可以整页看

正文{
背景色：#000；
颜色：#f1f1；
动画：淡入2S1；
}
标题{
宽度：100%；
}
.导航栏包装{
左侧填充：50px；右侧填充：50px；
}
标题。导航栏标志{
显示：内联块；
位置：相对位置；
}
标题导航{
显示：内联块；
}
标题.导航栏标志子标题{
显示：块；
位置：绝对位置；
底部：0；
左：20%；
}
导航{
填充：0px；
边际：0px；
}
头李{
浮动：左；
右边距：50px；
列表样式类型：无；
}
标题li：类型的最后一个{
右边距：0px；
}
a{
文字装饰：无；
颜色：白色；
}
#主标志{
字体系列：“Didact哥特式”，无衬线；
颜色：白色；
字号：2.3em；
字号：800；
保证金：0；
}
.括号1{
颜色：#b22121；
字体系列：“蹦极”，草书；
}
.括号2{
颜色：#787878；
字体系列：“蹦极”，草书；
}
#标识子{
颜色：白色；
字体大小：14px；
字号：20；
字体系列：“即将到来”，草书；
}
#横幅图像{
宽度：50%；
左：20%；
过滤器：模糊（3px）；
位置：相对位置；
垫面：5%；
}
#横幅文本{
最高：50%；
左：50%；
位置：固定；
转换：翻译（-50%，-50%）；
字体大小：50px；
文本对齐：左对齐；
}
h1{
边际上限：0px；
边缘底部：-50px；
字体系列：“永久标记”，草书；
字体大小：300；
文本阴影：4px2pRGBA（2382382380.5）；
不透明度：0；
-webkit动画：以3s 1向前滑动；
}
第h1部分：第N种类型（2）{
动画延迟：0.1s；
-webkit动画延迟：0.1s；
}
第h1部分：第N种类型（3）{
动画延迟：0.2s；
-webkit动画延迟：0.2s；
}
第h1部分：第N种类型（4）{
动画延迟：0.3s；
-webkit动画延迟：0.3s；
}
第h1部分：第N种类型（5）{
动画延迟：0.4s；
-webkit动画延迟：0.4s；
}
第h1部分：第N种类型（6）{
动画延迟：0.5s；
-webkit动画延迟：0.5s；
}
第h1部分：第N种类型（7）{
动画延迟：0.6s；
-webkit动画延迟：0.6s；
}
第h1部分：第N种类型（8）{
动画延迟：0.7s；
-webkit动画延迟：0.7s；
}
第h1部分：第N种类型（9）{
动画延迟：0.8s；
-webkit动画延迟：0.8s；
}
@关键帧滑入{
0% {
变换：旋转（90度）平移（-50%）；
不透明度：0.0；
}
100% {
变换：旋转（0度）平移（0%）；
不透明度：1.0；
}
}
@-韦布基