Css 4个div之间的相等填充，不填充第一个和最后一个div

我正在尝试将4个div分开，我希望第一个和最后一个div边位于页面的边缘，并且每个中间div之间的间距相等。我似乎无法从最后一个div中移除填充物，而不使div比其他div稍微大一点

如果用户在平板电脑或手机等小屏幕上观看，我还需要使用div来改变大小。这意味着在手机上，所有的div都将位于屏幕边缘，并且填充在div1-div2和div3-div4之间

我能达到我的目标的唯一方法就是把每一个div向左和向右填充5px，但是第一个和最后一个div不在页面边缘

这是我的代码，调整屏幕大小以改变大小

任何帮助都将被感谢

HTML

---

如果这是一个新项目，我建议您使用。一旦掌握了窍门，就比浮子容易多了

在包含元素中放置一行，并在左右两侧添加与填充相等的负左右边距。负边距会将内部元素拉到父元素之外。这与框架喜欢使用的方法相同

正文{
保证金：0；
}
.箱排{
显示器：flex；
柔性包装：包装；
利润率：0-5px；
}
.家庭分类箱{
宽度：50%；
填充物：5px；
框大小：边框框；
}
.box meta{
填充：10px；
字体大小：16px；
颜色：#FFF；
文本对齐：居中；
背景色：#C50132；
字体大小：粗体；
}
@介质（最小宽度：760像素）{
.家庭分类箱{
宽度：25%；
}
}

标题1
####
标题2
####
标题3
####
标题4
####

我将执行以下操作，仅在内部div的左右两侧应用填充

.home-cateogry-box {
display: block;
float: left;
box-sizing: border-box;
margin-bottom: 15px;

.home-category-box:not(:first-child),
.home-category-box:not(:last-child) {
padding: 0 15px;
}

---

假设您的目标是相对现代的浏览器，您可以选择使用CSS flexbox：

*，
*：：之前，
*：：之后{
/*为所有元素和：：before和
：：在伪元素之后：*/
框大小：边框框；
保证金：0；
填充：0；
}
身体{
/*导致使用flex布局：*/
显示器：flex；
/*允许内容换行到新行：*/
柔性包装：包装；
/*导致内容流的方向
沿着“行”运行（相对于
列）以DOM顺序（而不是
行反转（将使流程反转）：*/
弯曲方向：行；
/*将第一个和最后一个图元放置在边上
父元素的，同级元素之间有空格
要素：*/
证明内容：之间的空间；
对齐项目：自动；
/*将内容与周围（上方）的相等空间对齐
在内容流的横轴中：*/
对齐内容：周围的空间；
/*将宽度设置为视口的宽度：*/
宽度：100vw；
}
.家庭分类箱{
/*防止元素随时间增长/收缩
父元素或视口在以下方面调整大小
对兄弟姐妹：*/
flex:0自动；
/*在元素之间形成明显的间隔；调整到
口味：*/
宽度：20%；
}
.主页分类框>img+div{
/*这里的所有CSS都来自“内嵌样式”属性
这使得HTML看起来很混乱；请根据口味进行调整：*/
填充：10px；
字体大小：16px；
颜色：#FFF；
文本对齐：居中；
背景色：#C50132；
}
/*对于“小”屏幕：*/
@媒体屏幕和屏幕（最大宽度：760像素）{
/*更改匹配元素的宽度，
要强制每行仅包含两个项目，请执行以下操作：*/
.家庭分类箱{
宽度：45%；
}
}

标题1

####
标题2

####
标题3

####
标题4

####

flex box是一个选项吗？我不熟悉：（我不知道那是什么功能。

.home-category-box {
width: 25%;
display: block;
float: left;
box-sizing: border-box;
padding-right:15px;
margin-bottom:15px;
}

@media screen and (max-width:760px){

.home-category-box {
width: 50%;
display: block;
float: left;
box-sizing: border-box;
}

}

.home-cateogry-box {
display: block;
float: left;
box-sizing: border-box;
margin-bottom: 15px;

.home-category-box:not(:first-child),
.home-category-box:not(:last-child) {
padding: 0 15px;
}