Html 带有DIV id的CSS边距问题

在我下面的代码中，我面临以下问题div

expenses\u div

。我增加了

利润上限：3%为它，但不知何故它不工作

另外，
expenses\u div
位于
容器\u input
内。但是
expenses\u div
宽度大于为
容器输入设置的宽度（页面宽度的60%）。我无法理解
费用的问题

有人能带我到这里吗


.expenses\u包装
{
宽度：100%；
文本对齐：居中；
保证金：自动；
边缘顶部：50px；
}
.U.横幅
{
宽度：100%！重要；
背景色：黑色；
位置：相对位置；
文本对齐：居中；
颜色：白色；
填充物：5px；
溢出：隐藏！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
字体大小：20px；
位置：固定；
z指数：105！重要；
}	 
.容器输入
{
宽度：100%；
利润率最高：5%；
文本对齐：居中；
保证金：自动；
}
.主要开支
{
宽度：60%；
文本对齐：居中；
填充顶部：80px；
保证金：自动；
}
.开支科
{
宽度：100%！重要；
保证金：自动；
利润率最高：3%；
}
.费用分配左
{
高度：40px；
线高：40px；
背景色：黑色；
浮动：左；
显示：内联块；
文本对齐：左对齐；
左侧填充：12px；
颜色：白色；
宽度：48%；
字体大小：14px！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
} 
.费用分配权
{
高度：40px！重要；
线高：40px！重要；
宽度：48%；
浮动：左；
显示：内联块；
光标：指针；
背景：透明！重要；
position:relative；/*已添加（因为：after应该是相对于此而不是整个页面的！）*/
}
.expenses\u div\u右键选择
{
字体系列：“蒙特塞拉特”，无衬线！重要；
背景：透明！重要；
外观：无！重要；
-moz外观：无！重要；
-webkit外观：无！重要；
框大小：边框框！重要；
边框：1px纯黑！重要；
宽度：100%！重要；
颜色：黑色！重要；
高度：40px；
文本对齐：左！重要；
字体大小：14px！重要；
大纲：无；
职位：相对！重要；
光标：指针；
左侧填充：12px；
z指数：2；
}
.费用分配权利：之后
{ 
内容：“<>”；
字体：16px“控制台”，单空格；
字体大小：粗体；
颜色：白色；
背景色：黑色；
显示：内联块；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
位置：绝对；/*更改为绝对*/
顶部：0；/*已添加*/
右：0；/*已添加*/
宽度：40px；
高度：40px；
文本对齐：居中；
线高：40px；
溢出：隐藏！重要；
光标：指针；
z索引：1；/*已添加（针对您的第二个问题）*/
}
.费用和投入
{
高度：40px！重要；
线高：40px！重要；
边框：1px纯黑！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
大纲：无！重要；
宽度：100%！重要；
文本对齐：右对齐；
显示：内联块；
字体大小：14px！重要；
光标：指针；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框！重要；
-moz外观：无；
}

跟踪器
如何进行
选择一个选项
新数据
分析数据
刷新数据
日期
选择帐户
选择帐户
Opt1
Opt2
添加
clear:both
当您使用float时，父div在您使用float时不取高度，因此使用clear:both将其清除

clear属性与浮动直接相关。如果该图元可以水平放置在另一个浮动图元旁边的空间中，则该图元将。除非以与浮动相同的方向将清除应用于该图元。然后，该图元将向下移动到浮动图元的下方

最好的做法可能是保持
class
和
id
的名称不同，这纯粹是为了代码可读性，但没有相同的问题


.expenses\u包装
{
宽度：100%；
文本对齐：居中；
保证金：自动；
边缘顶部：50px；
}
.U.横幅
{
宽度：100%！重要；
背景色：黑色；
位置：相对位置；
文本对齐：居中；
颜色：白色；
填充物：5px；
溢出：隐藏！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
字体大小：20px；
位置：固定；
z指数：105！重要；
}	 
.容器输入
{
宽度：100%；
利润率最高：5%；
文本对齐：居中；
保证金：自动；
}
.主要开支
{
宽度：60%；
文本对齐：居中；
填充顶部：80px；
保证金：自动；
}
.开支科
{
宽度：100%！重要；
保证金：自动；
利润率最高：3%；
}
.费用分配左
{
高度：40px；
线高：40px；
背景色：黑色；
浮动：左；
显示：内联块；
文本对齐：左对齐；
左侧填充：12px；
颜色：白色；
宽度：48%；
字体大小：14px！重要；
字体系列：“蒙特塞拉特”，无衬线！重要；
} 
.费用分配权
{
高度：40px！重要；
线高：40px！重要；
宽度：48%；
浮动：左；
显示：内联块；
光标：指针；
背景：透明！重要；
position:relative；/*已添加（因为：after应该是相对于此而不是整个页面的！）*/
}
.expenses\u div\u右键选择
{
字体系列：“蒙特塞拉特”，无衬线！重要；
背景：透明！重要；
外观：无！重要；
-moz外观：无！重要；
-webkit外观：无！重要；
框大小：边框框！重要；
边框：1px纯黑！重要；
宽度：100%！重要；
颜色：黑色！重要；
高度：40px；
文本对齐：左！重要；
字体大小：14px！重要；
大纲：无；
职位：相对！重要；
光标：指针；
左侧填充：12px；
z指数：2；
}
.费用分配权利：之后
{ 
内容：“<>”；
字体：16px“控制台”，单空格；
字体大小：粗体；
颜色：白色；
背景色：黑色；
显示：内联块；
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
位置：绝对；/*更改为绝对*/
顶部：0；/*已添加*/
右：0；/*已添加*/
宽度：40px；
高度：40px；
文本对齐：居中；
线高：40px；
溢出：隐藏！重要；
光标：指针；
z索引：1；/*已添加（用于您的