Flexbox stops working properly after adding additional div

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);
}