为什么我的网格项未与中心对齐？

Question

我创建了这个导航条，并使用网格系统对齐它。但是由于某些原因，导航网格的内容溢出到导航栏之外，并且在它们应该在的位置的下方和右侧。我删除了我能找到的所有边距和填充，但没有任何遗憾。导航条的位置是固定的，而内部内容不是，但考虑到它们是同一网格内的项目，这应该不是问题。下面是代码:

:root{
--main-color:#ffc40c;
--secondary-color:lightyellow;
--main-red:#d9001d;
--secondary-red:#ff033e;
--dark-color:#444;
--light-color:#fafafa
}
body{
font-family:"Source Code Pro",monospace;
background-color:var(--light-color);
color:var(--dark-color);
margin-top:50px;
margin-left:0;
margin-right:0;
margin-bottom:0;
text-shadow:1px 1px 5px var(--light-color)
}
form{
width:100vw;
padding:1em
}
a{
text-decoration:none
}
input{
border:1px solid var(--main-color);
margin:.75em;
border-radius:.75em;
padding:.75em 1em
}
.navbar{
background-color:var(--main-color);
position:fixed;
display:grid;
align-items:center;
grid-template-areas:"searchbar close-button";
top:0;
left:0;
height:30px;
width:100%
}
.searchbar{
background-color:var(--secondary-color);
opacity:50%;
width:calc(100vw - 80px);
border-radius:1em;
padding:1em
}
.close-button{
display:grid;
place-items:center;
height:30px;
width:30px;
background-color:var(--light-color);
color:var(--main-red);
border:2px solid var(--main-red);
border-radius:50%;
font-weight:700
}
.close-button:hover{
background-color:var(--main-red);
color:var(--light-color);
border:2px solid var(--light-color);
transition-duration:.4s
}
.close-button:active{
rotate:360deg;
transition-duration:.5s
}

<form class="navbar">
<input
class="searchbar"
type="search"
id="name"
name="searchbar"
placeholder="Search here..."
/>
<a href="#!" class="close-button">
X
</a>
</form>

我如何把它带到顶部?

Answer 1

添加一个margin: auto;到导航栏类，并从搜索栏类中删除填充

:root{
--main-color:#ffc40c;
--secondary-color:lightyellow;
--main-red:#d9001d;
--secondary-red:#ff033e;
--dark-color:#444;
--light-color:#fafafa
}
body{
font-family:"Source Code Pro",monospace;
background-color:var(--light-color);
color:var(--dark-color);
margin-top:50px;
margin-left:0;
margin-right:0;
margin-bottom:0;
text-shadow:1px 1px 5px var(--light-color)
}
form{
width:100vw;
padding:1em;
}
a{
text-decoration:none
}
input{
border:1px solid var(--main-color);
margin:.75em;
padding:.75em 1em;
border-radius:.75em;
align-items: center;
}
.navbar{
background-color:var(--main-color);
position:fixed;
display:grid;
align-items:center;
grid-gap: auto;
grid-template-areas:"searchbar close-button";
top:0;
left:0;
height:30px;
width:100%
}
.searchbar{
background-color:var(--secondary-color);
opacity:50%;
width:calc(100vw - 80px);
border-radius:1em;
margin: 0;
}
.close-button{
display:grid;
align-items:center;
justify-content: center;
height:30px;
width:30px;
background-color:var(--light-color);
color:var(--main-red);
border:2px solid var(--main-red);
border-radius:50%;
font-weight:700;
}
.close-button:hover{
background-color:var(--main-red);
color:var(--light-color);
border:2px solid var(--light-color);
transition-duration:.4s
}
.close-button:active{
rotate:360deg;
transition-duration:.5s
}

<form class="navbar">
<input
class="searchbar"
type="search"
id="name"
name="searchbar"
placeholder="Search here..."
/>
<a href="#!" class="close-button">
X
</a>
</form>