Ul菜单不会在容器中留下浮点

Question

<ul>标头不是从容器最大宽度开始的。我添加了文本以显示容器的位置，为什么菜单不也从那里开始？

https://codepen.io/audn/pen/LLvdGb

ul.menu {
list-style-type: none;
margin: 0;
overflow: hidden;
background-color:#1f3647;
width:100%;
color:#798892;
}
.active{
background-color: #101d26;
}
li.menu {
float: left;
}
li.menu a {
display: block;
color:#798892 ;
padding: 20px 20px;
text-decoration: none;
}
li a:hover {
background-color: #101d26;
} 
.container{
max-width:750px;
margin-left:auto;
margin-right:auto;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"> 
<div class="container">
nboi
</div>
<ul class="menu">
<div class="container">
<li class="menu"><a href="#"><i class="material-icons">&#xE88A;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE30C;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE30A;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE896;</i></a></li>
<li class="menu" style="float:right;"><a href="#"><i class="material-icons">&#xE0D0;</i></a></li>
</ul>
</div>

Answer 1

您不能将div作为ul的直接子级。只需将菜单包装在一个元素中，将background-color应用于该元素，使颜色将是窗口的宽度，然后将.container添加到您的ul中以将其居中到您的视口宽度，并添加padding: 0以删除ul上的默认左填充。

ul.menu {
list-style-type: none;
overflow: hidden;
color: #798892;
padding: 0;
}
.menuContainer {
background-color: #1f3647;
}
.active {
background-color: #101d26;
}
li.menu {
float: left;
}
li.menu a {
display: block;
color: #798892;
padding: 20px 20px;
text-decoration: none;
}
li a:hover {
background-color: #101d26;
}
.container {
max-width: 750px;
margin-left: auto;
margin-right: auto;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
nboi
</div>
<div class="menuContainer">
<ul class="menu container">
<li class="menu"><a href="#"><i class="material-icons">&#xE88A;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE30C;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE30A;</i></a></li>
<li class="menu"><a href="#"><i class="material-icons">&#xE896;</i></a></li>
<li class="menu" style="float:right;"><a href="#"><i class="material-icons">&#xE0D0;</i></a></li>
</ul>
</div>

Answer 2

注意：不允许将block元素作为子元素放入inline元素中。

但其他错误：

1(您将.container限制为750px删除它：

.container {
max-width:750px;<------------Remove
margin-left:auto;
margin-right:auto;
}

2(插入padding:0到ul.menu：

ul.menu {
padding:0;
//more code...
}

演示