CSS grid布局导航栏子项未居中且溢出容器该如何解决？

问题根源 #

• 全局form样式给导航栏（属于form元素）额外添加了padding: 1em和width: 100vw属性，撑大容器的同时导致横向溢出
• 全局input样式给搜索框添加了margin: .75em属性，将搜索框顶出导航栏可视范围
• 默认盒模型为content-box，搜索框的内边距、边框会额外增加元素总宽高，总尺寸远超导航栏设置的30px高度，自然溢出
• 搜索框手动计算的宽度适配性差，容易出现尺寸误差

可直接使用的修改代码 #

CSS修改部分 #

/* 全局盒模型重置，推荐所有项目都加，避免内边距/边框撑大元素尺寸 */
* {
  box-sizing: border-box;
}

/* 覆盖全局form给导航栏添加的多余样式 */
.navbar {
  padding: 0 12px; /* 仅保留左右内边距避免内容贴边 */
  width: 100%;
  /* 直接定义网格列宽：搜索框占剩余全部空间，关闭按钮自适应内容宽度 */
  grid-template-columns: 1fr auto;
  gap: 10px; /* 两个元素之间的间距，无需手动给子元素加margin */
  min-height: 50px; /* 适配搜索框高度，可根据视觉需求调整 */
}

/* 覆盖全局input给搜索框添加的多余margin，调整内边距适配导航栏高度 */
.searchbar {
  margin: 0;
  padding: 0.5em 1em;
  width: 100%; /* 无需手动计算宽度，网格会自动分配 */
}

/* 可选：移除关闭按钮默认边距 */
.close-button {
  margin: 0;
}

HTML代码无需修改 #

内容的提问来源于stack exchange，提问作者user16767975