the<nav>元素不会在<header>元素内呈现，即使它嵌套在里面。
我尝试使用over-flow:hidden类将<header>属性添加到index-head元素。我也尝试添加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>在<nav>中获得<header>的最简单方法是将<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确定其相对于其兄弟姐妹的宽度时它需要'优先级'。
了解有关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>因为您在标题内添加了一个“h1”标记，默认情况下具有该标记
display: block
将元素拉伸到“header”元素的整个宽度的属性。
要解决此问题，必须将css规则添加到“h1”元素
display: inline-block;
JSFiddle链接：https://jsfiddle.net/nzf1egcr/1/