html/css中的间距不正确

该按钮与搜索输入对齐。但是我不能固定间距

正如您在示例中看到的，与背景框相比，左侧的间距小于右侧。我也不能改变按钮的宽度来解决这个问题，因为它会保持那个宽度

我希望有人能帮忙（下面的片段）

$（文档）.ready（函数（）{
var regionDropDown=$（'.region\u dropdown\u section'），
regionButton=regionDropDown.find（'button'），
regionList=regionDropDown.find（'.region\u dropdown\u content'）.children（）；
$（regionList）。在（'单击'）上，函数（e）{
var区域=e.目标；
regionButton.text（region.text）.val（region.text）；
});
});
html、body、div、span、object、iframe、h1、h2、h3、h4、h5、h6、p、blockquote、pre、a、abbr、首字母缩写、地址、代码、del、dfn、em、img、q、dl、dt、dd、ol、ul、li、字段集、表单、标签、图例、表格、标题、tbody、tfoot、thead、tr、th、td{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
垂直对齐：基线；
大纲：无；
}
身体{
背景：url（../images/background/body\u background.png）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.logo img{
左边距：自动；
右边距：自动；
显示：块；
边缘顶部：50px；
边缘底部：50px；
}
.搜查传唤人{
保证金：自动；
宽度：35%；
填充：10px；
背景色：rgba（0,0,0,0.7）；
边框：1px实心；
-moz边框图像：-moz线性渐变（顶部，#006184 0%，#303142 100%）；
-webkit边框图像：-webkit线性渐变（顶部，#006184 0%，#303142 100%）；
边界图像：线性渐变（到底部，#006184 0%，#303142 100%）；
边界图像切片：1；
}
/*下拉按钮*/
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：4px；
字体大小：12px；
边界：无；
光标：指针；
高度：40px；
宽度：80px；
}
/*下拉内容（默认情况下隐藏）*/
.区域\下拉菜单\内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.region_下拉列表_部分{
溢出：隐藏；
宽度：95px；
}
/*下拉列表中的链接*/
.区域\下拉菜单\内容a{
颜色：黑色；
文字装饰：无；
显示：内联块；
宽度：45%；
保证金：0；
垂直对齐：顶部；
填充：10px 0px 10px 10px；
}
/*更改悬停时下拉链接的颜色*/
.region_下拉菜单_内容a:悬停{背景色：#f1f1}
/*悬停时显示下拉菜单*/
.region\u下拉菜单\u部分：悬停.region\u下拉菜单\u内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.region\u下拉列表\u部分：hover.dropbtn{
背景色：#3e8e41；
}
.Searchbox_召唤者{
保证金：自动；
显示：块；
宽度：65%；
}
#搜索框{
右边距：0；
左边距：0；
宽度：80%；
背景色：白色；
高度：40px；
浮动：左；
}
.region_下拉列表_部分{
职位：继承；
显示：内联块；
最大宽度：100%！重要；
溢出：隐藏；
}
#搜索输入{
宽度：92%；
线高：40px；
背景：白色；
边界：0；
大纲：0；
保证金：0；
填充：0；
左边距：20px；
字体大小：24px；
}

选择区域
您必须更改两个CSS值：

首先，将按钮所在的整个div的宽度设置为20%（搜索栏为80%），而不是95px：

.region\u下拉菜单\u部分{
溢出：隐藏；
宽度：20%；
}

然后将按钮大小设置为100%（允许的20%），而不是80px：

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：4px；
字体大小：12px；
边界：无；
光标：指针；
高度：40px；
宽度：100%；
}
先生，你真了不起！非常感谢！