Flexbox stops working properly after adding additional div - html

Question

I wanna make a simple responsive site with 3 images in-front of a background, each of them a button that gets overlayed when you hover it. The problem is when I add the additional containers in order to do the image hover overlays, justify-content and row-wrap stop working as they should and they no longer center the images properly. If I remove all the container divs everything goes back to normal.
.background {
display: inline-block;
position: relative;
min-width: 100%;
max-width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.mountain {
pointer-events: none;
position: absolute;
width: 100%;
min-height: 100%;
z-index: -1;
}
.tabs {
display: flex;
justify-content: space-between;
align-content: space-between;
flex-flow: row wrap;
gap: 10px;
padding-top: 200px;
}
.container1 {
position: relative;
left: 80px;
}
.container1:hover .portraits {
opacity: 0.5;
}
.portraits {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container2 {
position: relative;
width: 480px;
max-height: 100%;
}
.container2:hover .secondtab {
opacity: 0.5;
}
.secondtab {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container3 {
position: relative;
margin-right: 80px;
;
}
.container3:hover .thirdtab {
opacity: 0.5;
}
.thirdtab {
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
<div class="background">
<img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
<div class="buttons">
<button class="Contacts">CONTACTS</button>
<button class="Aboutme">ABOUT ME</button>
<section class="tabs">
<div class="container1">
<input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container2">
<input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container3">
<input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
</section>

Answer 1

Change space-between to space-around on your .tabs class. Then, remove any values you have set on your flex items. For example, I removed the left: 80px value you had set on container1 and removed the margin-right from container3.
Setting those values are being counterproductive to the flexbox as you are instructing the browser to position those containers in a relatively static position within the parent. This will be much more responsive if you allow flex do its job.
.background {
display: inline-block;
position: relative;
min-width: 100%;
max-width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.mountain {
pointer-events: none;
position: absolute;
width: 100%;
min-height: 100%;
z-index: -1;
}
.tabs {
display: flex;
justify-content: space-around;
align-content: space-between;
flex-flow: row wrap;
padding-top: 200px;
}
.container1 {
display: flex;
position: relative;
}
.container1:hover .portraits {
opacity: 0.5;
}
.portraits {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container2 {
display: flex;
position: relative;
width: 480px;
max-height: 100%;
}
.container2:hover .secondtab {
opacity: 0.5;
}
.secondtab {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
.container3 {
display: flex;
position: relative;
}
.container3:hover .thirdtab {
opacity: 0.5;
}
.thirdtab {
display: flex;
margin: auto;
max-width: 100%;
opacity: 1;
transition: .5s ease;
backface-visibility: hidden;
width: 480px;
max-height: 100%;
}
<div class="background">
<img class="mountain" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864">
<div class="buttons">
<button class="Contacts">CONTACTS</button>
<button class="Aboutme">ABOUT ME</button>
</div>
<section class="tabs">
<div class="container1">
<input class="portraits" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container2">
<input class="secondtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
<div class="container3">
<input class="thirdtab" type="image" src="https://scontent.fsof8-1.fna.fbcdn.net/v/t1.15752-9/248678344_166048722401558_3753835307514045389_n.jpg?_nc_cat=109&ccb=1-5&_nc_sid=ae9488&_nc_ohc=hMjalJL0QVMAX8jUsDI&_nc_ht=scontent.fsof8-1.fna&oh=03_AVLASJWuh-jugLUe4XS8djFYOc8Ps3PK3bA8Ue4D9zHEMg&oe=62801864"
/>
</div>
</section>
</div>
Edit ~ If you don't want the images to wrap, remove all the static (fixed) widths and use this:
.container1,
.container2,
.container3 {
width: calc(100%/3);
}