目前还不清楚你的意图是什么，但我怀疑问题是输入框被平滑，而按钮有额外的空间。这是因为您对两个button应用了flex样式，然后是input，而不是form。Flexbox仅应用于容器的直接子级。
我猜您的意图是，在#clear, .number, #generator { }规则中包含#inputForm，并添加width: 100%;
您可能希望取消input上的双边框，因此添加.number {border: 0;}

* {
    border: black 1px solid;
    box-sizing: border-box;
}

body {
    background-color: rgb(218, 27, 27);
    /* min-height: 100vh; */
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}

h1 {
    margin: 0;
}

#gridContainer {
    width: 50%;
    height: 80%;
    background-color: white;
    display: grid;
    border: solid rgb(218, 27, 27) 8px;
}

.header {
    /* display: flex; */
    /* flex-direction: column; */
    margin-bottom: 5px;
    width: 800px;
    text-align: center;
    font-size: 30px;
    color: #FAE481;
}

.buttons {
    display: flex;
    justify-content: space-evenly;
}

input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

#clear, .number, #generator, #inputForm {
    /* flex-grow: 1; */
    width: 100%;
    font-size: 30px;
    text-align: center;
    border: 4px solid black;
    color: #FAE481;
    background-color: rgb(218, 27, 27);
}

.number {
    border: 0;
}

input::placeholder {
    /* background-color: rgb(218, 27, 27); */
    color: #FAE481;
}

<div class="header">
  <h1>Etch A Sketch</h1>
  <div class="buttons">
    <button id="clear">Clear</button>
    <button id="generator">Random Grid</button>
    <form id="inputForm">
       <input type="number" class="number" min=1 max=64 placeholder="Enter a # 1-64">
    </form>
  </div>
</div>
<div id="gridContainer"></div>

我读了拉尔夫的评论，想嗯，让我试试。我认为这确实是一个更干净的方法，你可以删除<div class="buttons">。我想你会更喜欢width: 100%;而不是flex-grow: 1;

* {
    border: black 1px solid;
    box-sizing: border-box;
}

body {
    background-color: rgb(218, 27, 27);
    /* min-height: 100vh; */
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 0;
}

h1 {
    margin: 0;
}

#gridContainer {
    width: 50%;
    height: 80%;
    background-color: white;
    display: grid;
    border: solid rgb(218, 27, 27) 8px;
}

.header {
    /* display: flex; */
    /* flex-direction: column; */
    margin-bottom: 5px;
    width: 800px;
    text-align: center;
    font-size: 30px;
    color: #FAE481;
}

#inputForm {
    display: flex;
    justify-content: space-evenly;
}

input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

#clear, .number, #generator {
    /* flex-grow: 1; */
    width: 100%;
    font-size: 30px;
    text-align: center;
    border: 4px solid black;
    color: #FAE481;
    background-color: rgb(218, 27, 27);
}

input::placeholder {
    /* background-color: rgb(218, 27, 27); */
    color: #FAE481;
}

<div class="header">
  <h1>Etch A Sketch</h1>
  <form id="inputForm">
    <button id="clear">Clear</button>
    <button id="generator">Random Grid</button>
    <input class="number" type="number" min=1 max=64 placeholder="Enter a # 1-64">
  </form>
</div>
<div id="gridContainer"></div>