<nav>元素不会在<header>元素内呈现，即使它嵌套在元素内部也是如此。
我尝试使用index-head类将over-flow:hidden属性添加到<header>元素。我还尝试添加position:relative和position:absolute。
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}<body>
<header class="index-head">
<a href="#"><img class="logo" src="images/logo.png"></a>
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Signup</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>
</body>因为您在标头中添加了一个"h1"标签，默认情况下具有
display: block
将元素拉伸到"header"元素的整个宽度的属性。
要解决此问题，您必须在"H1"元素中添加 CSS 规则
display: inline-block;
JSFiddle link： https://jsfiddle.net/nzf1egcr/1/
获取<header>内部<nav>的最简单方法是将<h1.brand-name>元素设置为display:inline-block。默认情况下，浏览器代理将<hX>标签设置为display:block，它跨越这些元素 100% 的可用空间，在这种情况下是将您的<nav>推到它下面。由于<header>具有固定的高度，这迫使<nav>向外。
我还补充了...
display: flex;
align-items: center;
justify-content: space-between;
<header.index-head>在垂直和水平方向上均匀地间隔子元素。
然后，我将flex-grow: 1;添加到<nav>元素中，以确保当flex-box确定其相对于其同级的宽度时，它具有"优先级"。
了解有关弹性盒的更多信息
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.index-head{
height: 90px;
width: 100%;
background-color: #000;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo{
width: 50px;
float: left;
margin: 20px;
margin-right: 0;
}
.brand-name{
color: #ffc107;
line-height: 90px;
font-family: 'Catamaran', sans-serif;
display: inline-block;
}
.index-head nav{
float: right;
margin-top: 0;
width: 50%;
flex-grow: 1;
}
.index-head nav ul li{
list-style: none;
display: inline-block;
font-size: 25px;
padding-left: 50px;
}<body>
<header class="index-head">
<a href="#"><img class="logo" src="images/logo.png"></a>
<h1 class="brand-name">Eeat</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Signup</a></li>
<li><a href="#">Login</a></li>
</ul>
</nav>
</header>
</body>