Need to fix it!

Web Development
1 
    <section class="locations">
      <div class="bg-location">
          <div><h2>Locations</h2></div>
          <div class="flex-wrapper">
            <div>
              <h3>Downtown</h3>
              <p>384 West 4th St</p>
              <p>Suite 108</p>
              <p>Portland, Maine</p>
            </div>
            <div>
              <h3>East Bayside</h3>
              <p>3433 Phiserman's Avenue</p>
              <p>(Northwest Corner)</p>
              <p>Portland, Maine</p>
            </div>
            <div>
              <h3>Oakdale</h3>
              <p>515 Crescent Avenue</p>
              <p>Second Floor</p>
              <p>Portland, Maine</p>
            </div>
          </div>

      </div>
    </section>

.bg-location {
  background-image: url(../images/img-locations-background.jpg);
  background-size: cover;
  /* background-position: center; */
  height: 600px;
  min-width: 1300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding-bottom: 40px; 
}


.flex-wrapper  {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* flex-shrink: 2; */
  gap: 40px;
  /* max-width: 1300px; */
}

.flex-wrapper div {
  width: 300px;
  background-color: #000;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 20px 0;
  opacity: 1;
}

Can someone explain why these three divs are overflowing when I adjust my browser window? They are exceeding the container’s bounds.