Why aren't my grid items aligned to the center?

I created this navbar and aligned it using the grid system. But the contents of the navigation grid overflow out side the navbar for some reason and below and towards the right of where they should be. I removed any margin and padding I could find but to no awail. The position of the navbar is fixed and the inside contents are not but that should not have been an issue considering that they are items within the same grid. Below is the code:

: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>

How do I bring it to the top?