Html Css标题与三个div并排响应

我创建了这个简单的标题，想知道这是否是一个并排放置div的好方法？ 我是否正确地将div居中，还是应该使用像素作为宽度而不是百分比

现场演示：

a{
文字装饰：无；
}
.集装箱{
宽度：100%；
保证金：0自动；
最大宽度：1200px；
框大小：边框框；
}
.行{
溢出：隐藏；
}
.标题{
填充：8px 8px 32px 8px；
背景：#FFCA00；
高度：200px；
}
.标志{
背景：url（'https://placehold.it/200x200")不重复;；
背景尺寸：100px 100px；
宽度：100px；
高度：100px；
文本缩进：-100%；
浮动：左；
显示：内联块；
}
.siteName{
显示：内联块；
边缘顶端：40px；
字体大小：15磅；
颜色：白色；
字体大小：粗体；
浮动：左；
}
mainNav先生{
浮动：左；
显示：内联块；
宽度：50%；
左边距：自动；
右边距：自动；
文本转换：大写；
边缘顶部：25px；
}
梅纳夫{
列表样式类型：无；
文本对齐：居中；
}
李美娜先生{
显示：内联；
}
梅纳夫·乌尔·李先生{
颜色：#fff；
填充物：5px；
}
.mainNav ul li a:悬停{
填充物：5px；
边框底部：2倍实心#fff；
}
.mainNav.current{
填充物：5px；
颜色：黑色；
边框底部：2倍实心#fff；
}

不清楚要如何对齐菜单。 但是，从您提供的示例来看，我想下面的代码将使您的菜单响应

.mainNav {
  width: 50%;
  text-transform: uppercase;
}

.mainNav ul {
  display: flex;
  list-style-type: none;
  text-align: center;
}

.mainNav ul li {
  flex-grow: 1;
}

看

编辑1

如果要将菜单与标题对齐，请使用以下代码（站点徽标和名称包装在div.title中）

---

请参见使用容器类

显示：block

.container {
   width: 100%;
   margin: 0 auto;
   max-width: 1200px;
   box-sizing: border-box;
   display:block;

}

如果您想测试，请将宽度减少到50%，然后测试它是否工作

你问这个问题是什么意思？请澄清你想要什么？@SantoshKhalse在我的电脑上，菜单不是居中的，而是在站点全名旁边，而不是居中。所以我想知道这是否只是针对我的电脑，或者代码中有一些错误为什么不在中间。我不确定是否是最好的地方进行代码审查。也许这更合适；）。无论如何，当支持（某种非常）旧的浏览器不是一项严格的要求时，我更喜欢
flex-box
定位，而不是浮动布局。@lupz我使用的是最新的firefox，它应该支持这种功能。@lyraX它与您的浏览器无关。这是关于你用户的浏览器。
.container {
   width: 100%;
   margin: 0 auto;
   max-width: 1200px;
   box-sizing: border-box;
   display:block;

}