Html 无法在一个分区内获取这2个分区

我试图让这两个列表显示在标题顶部栏div中，但看不出我做错了什么。现在，社交媒体在第一个下面

css应该将2个div放在包含的div中。第一个div应该放在它所在的左侧。第二个，我想把它放到右边

#标题顶部栏{
显示：内联块；
最大宽度：1178px；
高度：22px；
边缘底部：5px；
}
#联络资料表{
高度：22px；
位置：相对位置；
底部：0px；
左：0；
保证金：0；
宽度：801px；
}
ul#联系方式{
位置：绝对位置；
底部：3px；
}
ul#联系方式李{
显示：内联；
保证金：5px 5px 5px 0；
垫底：5px；
左侧填充：22px；
}
#社交媒体链接{
高度：22px；
位置：相对位置；
底部：0px；
右：0；
保证金：0；
宽度：350px；
}
ul#社交媒体{
位置：绝对位置；
底部：3px；
}
ul#社交媒体李{
显示：内联；
保证金：5px 5px 5px 0；
垫底：5px；
左侧填充：22px；
右侧填充：5px；
}

555-555-5555
电子邮件地址
预约时间
地址


facebook
youtube
yelp
谷歌+

尝试添加

显示：内联块

在您的

#联系人详细信息列表

和

#社交媒体链接

中

所以它会像：

 #contact-details-list {
   display: inline-block;
   height: 22px;
   position: relative;
   bottom: 0px;
   left: 0;
   margin: 0;
   width: 801px;
 }

 #social-media-links {
   display: inline-block;
   height: 22px;
   position: relative;
   bottom: 0px;
   right: 0;
   margin: 0;
   width: 350px;
 }

---

您应该在标题顶部栏中使用display:flex，而不是内联块，这是最佳实践

#header-top-bar {
  display: flex;
  max-width: 1178px;
  height: 22px;
  margin-bottom: 5px;
}

---

您的代码中似乎没有任何内容试图使

#联系人详细信息列表

和

#社交媒体链接

并排出现。。。