为什么我的网格项目没有与中心对齐？

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>