CSS网格和伸缩框对齐问题

Question

所以我在做这个布局，我不能得到标题正确对齐我想移动按钮和标题到红色框输入图片描述

代码如下:

<div class="main">
<div class="header">
<h1 class="notes__title">Notes</h1>
<button class="notes__create">Create</button>
</div>
<div class="notes">
<div class="note">
<h3 class="note__title">Note Title</h3>
<div class="note__body">Text....</div>
</div>
</div>

和CSS

.main {
display: flex;
width: 100%;
align-items: center;
flex-direction: column;
}
.header {
display: flex;
width: 100%;
justify-content: space-around;
align-items: center;
margin: 10px 0px;
}
.notes__title {
color: #fff;
}
.notes {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

请帮

Answer 1

你正在使用空格，这就是你所看到的效果。

试题:

.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}

Answer 2

.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
max-width: 1200px;
}

Answer 3

好的，我这样做了，它工作了虽然我对这个解决方案不满意，但我想只使用flex box来实现它#

.main {
max-width: 960px;
margin-right: auto;
margin-left: auto;
padding-right: 15px;
padding-left: 15px;
min-height: 100vh;
}
.header {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin: 10px 0px;
}

Answer 4

我能想到的最简单的解决方案是使用引导颜色，并使用笔记和按钮之间的空格来到达正确的位置