您能否看一下并帮助理解为什么 class="button" div 不想水平放置在右侧?而是彼此粘在一起并挂在中间?也许你知道如何做到这一点?
https://jsfiddle.net/pkqjw0d1/4/
<body>
<header>
<div class="h1">Заголовок страницы</div>
<div class="button">Блок-кнопка</div>
</header>
<div class="mainArea"></div>
</body>
body {
display: flex;
flex-direction: column;
}
header {
display: flex;
align-items: center;
justify-content: center;
position: fixed; /*КРИТИЧНО!*/
width: 100%;
height: 6em;
margin-bottom: 0.5em;
border-bottom: 1px solid #a08a4a;
background: linear-gradient(to top, rgba(255, 253, 210), rgba(250, 161, 32));
box-shadow: 0 0.1em 0.2em 0.1em #716b5a;
}
.h1 {
font-size: 3em;
text-align: center;
}
.button {
justify-self: end;
width: 10%;
height: 3em;
padding: 2px;
border: 1px solid #000;
text-align: center;
font-size: 1em;
}
.mainArea {
display: flex;
margin-top: 6em;
}