flex is being applied to the direct children of header. When you add the container div, it'll apply to that but not to any of its children. To achieve what you're looking for, move the flex rules to container instead of header.
html,
body {
margin: 0;
padding: 0;
background-color: #24252A;
color: white;
height: 100%;
}
header {
background: gray;
}
.container {
display: flex;
justify-content: space-between;
width: 80%;
margin: 0 auto;
}
.logo img {
height: 50px;
}
<body>
<header>
<div class="container">
<div class="brand">
<h1>Site</h1>
</div>
<div class="logo">
<img src="https://banner2.cleanpng.com/20180422/srw/kisspng-logo-web-development-clip-art-site-vector-5add4dee019ee5.7373764915244528460066.jpg" alt="">
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</header>
</body>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
