Html div CSS中的搜索框

我正在为youtube api搜索页面制作CSS。我在包装div中有一个搜索框，我希望它不超过父div宽度的100%。但是，搜索框超出div几个像素。我使用了我在css技巧中看到的框大小调整轨迹，但这并没有解决这个样式问题。我肯定我忘记了一些愚蠢的事情，所以我需要另一个大脑来帮助

以下是我在github上的项目：

---

编辑：感谢你们两位的回答，你们解决了我的难题

在父元素上使用

填充

，而不是在

输入

上使用

边距

，并使用

框大小：边框框

属性

label {
    display: block; 
    padding: .5em;
}

#query {
    display: block; 
    width: 100%; 
    box-sizing: border-box; 
    margin: 0;
}

---

工作小提琴：

为小提琴左右添加填充物

按钮{左填充：2em；右填充：2em；}

不需要为#查询设置左边距和右边距

这里是更新的css

.buttons { 
     text-align: center; 
     padding: 2em; 
     max-width: 900px; 
}
#query { 
    display: block; 
    border: 1px solid #000; 
    width: 100%; 
    font-size: 1.5em; 
    margin-bottom: 1em; 
} 

---

这里发生的是

#query

使用左边距和右边距，这会迫使输入框离开焦点。一个简单的修复方法是相应地更新以下css类。FixProvidebyMe删除了不需要的边距，而是提供给按钮的父包装

.buttons {
    max-width: 900px;
    padding: 2em;
    text-align: center;
}

#query {
    border: 1px solid #000;
    display: block;
    font-size: 1.5em;
    margin-bottom: 1em;
    width: 100%;
}