Html 调整浏览器大小时对齐Flexbox部分

上面是它在1920宽浏览器上的屏幕截图。这基本上就是我想要的布局，但是当我调整浏览器的大小时，它看起来是这样的：

我希望方框在各个部分的左侧和右侧没有白色间隔，并且在有/没有间隔的情况下保持100%的宽度
我意识到间距的出现是因为代码是如何设置的，中间部分有边距将其推开，但我不确定如何设置以实现第一个屏幕截图和这种效果

小提琴：

body，
html{
边际：0px；
字体系列：lato reg；
字体大小：16px；
颜色：#3C；
溢出x：隐藏；
}
img{
宽度：100%；
身高：100%；
}
.科{
位置：相对位置；
}
/*--------------------------------------第五节--*/
.柔性容器{
边缘顶部：10px；
宽度：100%；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit flex流：行换行；
-ms flex流：行换行；
柔性流：行换行；
}
.独立工作{
宽度：540px；
-webkitflex:auto；
-ms-flex:auto；
flex：自动；
显示：内联块；
高度：237px；
位置：相对位置；
边缘底部：10px；
光标：指针；
过渡：1s；
}
.工作指示：悬停img{
不透明度：.6；
过渡：.6s；
}
.中{
左侧填充：10px；
右边填充：10px；
宽度：783px；
}
.独立工作{
位置：绝对位置；
明确：两者皆有；
底部：0；
左：0；
颜色：白色；
左边距：40px；
文本转换：大写；
边缘底部：40px；
字号：2.125em；
字体系列：latobold；
字母间距：.16em；
}
.中跨{
左边距：50像素；
}

托普沃克斯
共同的
市场
工作台
拉布勒
基辅

在媒体查询中，尝试删除

中间
上的左右
填充

您的代码中包含以下内容：

.middle {
    padding-left: 10px;
    padding-right: 10px;
    width: 783px;
}

尝试以下调整：

@media screen and ( max-width: 1200px) {
    .middle { 
         padding-left: 0;
         padding-right: 0; }
}

现在，当屏幕尺寸小于1200px宽时，填充被移除

将元素的填充更改为始终5px

现在，它们之间的间隔是10px，这就是你想要的

要使最左侧元素上的填充再次显示为零，请在flex容器上设置负边距-5px。这会让人产生一种错觉，认为这些元素是完美地结合在一起的


body，
html{
边际：0px；
字体系列：lato reg；
字体大小：16px；
颜色：#3C；
溢出x：隐藏；
}
img{
宽度：100%；
身高：100%；
}
.科{
位置：相对位置；
}
/*--------------------------------------第五节--*/
.柔性容器{
边缘顶部：10px；
宽度：100%；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit内容：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit flex流：行换行；
-ms flex流：行换行；
柔性流：行换行；
左边距：-5px；
右边距：-5px；
}
.独立工作{
宽度：540px；
-webkitflex:auto；
-ms-flex:auto；
flex：自动；
显示：内联块；
高度：237px；
位置：相对位置；
边缘底部：10px；
光标：指针；
过渡：1s；
左侧填充：5px；
右侧填充：5px；
}
.工作指示：悬停img{
不透明度：.6；
过渡：.6s；
}
.中{
宽度：783px；
}
.独立工作{
位置：绝对位置；
明确：两者皆有；
底部：0；
左：0；
颜色：白色；
左边距：40px；
文本转换：大写；
边缘底部：40px；
字号：2.125em；
字体系列：latobold；
字母间距：.16em；
}
.中跨{
左边距：50像素；
}

托普沃克斯
共同的
市场
工作台
拉布勒
基辅
Nice，这很好，我确实在考虑这样做，但我不想依赖css@media规则，因为我有一个经常使用它们的习惯，现在，我正在尝试实现流畅的设计，但我想有时是必要的？它们的存在有一个原因：-）解决了，最佳答案：）