Html 导航栏和图像居中的问题

作为学校项目的一部分，我正在尝试创建我的第一个网页。然而，当我在顶部栏中放置一个徽标并将其居中时，我的导航栏会向下移动。我想知道是否有人能帮忙

JS小提琴：

这是我的密码：

#标题{
高度：200px；
宽度：100%；
背景色：黑色；
}
#顶杆{
背景重复：重复-x；
位置：绝对位置；
左：0；
宽度：100%；
高度：200px；
填充：0px；
边际：0px；
}
//顶部导航栏//
.导航栏{
背景色：黑色；
位置：绝对位置；
左：0；
排名：0；
宽度：100%；
高度：250px；
}
模拟中心{
显示：块；
左边距：自动；
右边距：自动；
}
.导航栏{
填充：210px；
边际：0px；
文本对齐：居中；
}
.导航栏李{
列表样式类型：无；
填充：8px；
高度：24px；
边缘顶部：30px；
利润底部：4倍；
显示：内联；
}
.导航栏LIA{
颜色：灰色；
背景色：黑色；
字体大小：13px；
文本转换：大写；
字体系列：“投石机MS”，Arial，Helvetica，无衬线；
文字装饰：无；
盒影：0px；
边界半径：3px；
右侧填充：1em；
左：1米；
线高：2米；
右边距：16px；
}
.导航栏李：第一个孩子{
左边距：20px；
边界：#C00；
}

不确定要实现什么设计，但我只是将导航栏的位置更改为相对，将图像更改为绝对，所以。。。将left设置为50%，并使用CSS属性

transform:translateX（-50%）图像最终居中

不确定您想要实现什么样的设计，但我只是将导航栏的位置更改为“相对”，将图像更改为“绝对”，所以。。。将left设置为50%，并使用CSS属性
transform:translateX（-50%）图像最终居中

删除
导航栏ul
规则处的
填充：210px

删除
导航栏ul
规则处的
填充：210px

将
ul中的css更改为，删除
填充：210px

.navigation-bar ul   {
    margin: 0px;
  text-align:center;
}

将
ul
中的css更改为，删除
填充：210px

.navigation-bar ul   {
    margin: 0px;
  text-align:center;
}