Aligning Flexbox sections when resizing browser - html

Question

Above is a screenshot of how it looks on a 1920 width browser. This is essentially the layout I want, but when I resize the browser, it looks like this:
I would like the boxes to have no white spacing to the left and right of the individual sections and keep them all the same 100% width with/without the spacing.
I realize the spacing is occuring because of how the code is set up where the middle section has margin that pushes it away, but I'm not sure how to set this up to achieve both the first screenshot and this effect.
Fiddle: https://jsfiddle.net/jzhang172/r641pmzb/
body,
html {
margin: 0px;
font-family: lato-reg;
font-size: 16px;
color: #3c3c3c;
overflow-x: hidden;
}
img {
width: 100%;
height: 100%;
}
.section {
position: relative;
}
/*--------------------------------------Fifth Section--*/
.flex-container {
margin-top: 10px;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
}
.work-indiv {
width: 540px;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
display: inline-block;
height: 237px;
position: relative;
margin-bottom: 10px;
cursor: pointer;
transition: 1s;
}
.work-indiv:hover img {
opacity: .6;
transition: .6s;
}
.middle {
padding-left: 10px;
padding-right: 10px;
width: 783px;
}
.work-indiv span {
position: absolute;
clear: both;
bottom: 0;
left: 0;
color: White;
margin-left: 40px;
text-transform: uppercase;
margin-bottom: 40px;
font-size: 2.125em;
font-family: latobold;
letter-spacing: .16em;
}
.middle span {
margin-left: 50px;
}
<div class="section" id="fifth">
<div class="flex-container">
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Topworkz">
<span>Topworkz</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Joint">
<span>Joint</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Market">
<span>Market</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Worktop">
<span>Worktop</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Lable">
<span>Lable</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="KYIV">
<span>KYIV</span>
</div>
</div>

Answer 1

Try removing the left and right padding on .middle in a media query for smaller screen sizes.
You have this in your code:
.middle {
padding-left: 10px;
padding-right: 10px;
width: 783px;
}
Try this adjustment:
#media screen and ( max-width: 1200px) {
.middle {
padding-left: 0;
padding-right: 0; }
}
Now, when the screen size is less than 1200px wide, the padding is removed.
Revised Demo

Answer 2

Change the padding of the elements to be always 5px.
Now, the separation between them is 10px, that is what you want.
To make the padding on the left most elements appear to be zero again, set a negative margin of -5px on the flex container. This will make the illusion that the elements are alligned perfectly
body,
html {
margin: 0px;
font-family: lato-reg;
font-size: 16px;
color: #3c3c3c;
overflow-x: hidden;
}
img {
width: 100%;
height: 100%;
}
.section {
position: relative;
}
/*--------------------------------------Fifth Section--*/
.flex-container {
margin-top: 10px;
width: 100%;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin-left: -5px;
margin-right: -5px;
}
.work-indiv {
width: 540px;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
display: inline-block;
height: 237px;
position: relative;
margin-bottom: 10px;
cursor: pointer;
transition: 1s;
padding-left: 5px;
padding-right: 5px;
}
.work-indiv:hover img {
opacity: .6;
transition: .6s;
}
.middle {
width: 783px;
}
.work-indiv span {
position: absolute;
clear: both;
bottom: 0;
left: 0;
color: White;
margin-left: 40px;
text-transform: uppercase;
margin-bottom: 40px;
font-size: 2.125em;
font-family: latobold;
letter-spacing: .16em;
}
.middle span {
margin-left: 50px;
}
<div class="section" id="fifth">
<div class="flex-container">
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Topworkz">
<span>Topworkz</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Joint">
<span>Joint</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Market">
<span>Market</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Worktop">
<span>Worktop</span>
</div>
<div class="work-indiv middle">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="Lable">
<span>Lable</span>
</div>
<div class="work-indiv">
<img src="https://pixabay.com/static/uploads/photo/2015/12/21/06/41/landscape-1102117_960_720.jpg" alt="KYIV">
<span>KYIV</span>
</div>
</div>