Why do the blocks not narrow when the screen is reduced, but crawl out beyond the parent?

Question

css

Hello, when narrowing the content, slide blocks do not decrease, but crawl out of the container. What's wrong?

<section class="section__gallery">
            <div class="container">
                <div class="section__gallery-wrap">
                    <div class="section__gallery-left-block">
                        <div class="section__gallery-inner-left-block">
                            <h2 class="section__gallery-title title-h2 white-h2">
                                Галерея
                            </h2>
                            <label for="" class="section__gallery-label-for-select">
                                Фильтр:
                            </label>
                            <select name="" id="section__gallery-select-category"
                                class="section__gallery-select-category">
                                <option value="">Живопись</option>
                            </select>
                        </div>
                        <div class="section__gallery-left-block-descr">
                            <p class="section__gallery-left-block-descr">
                                Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
                                <a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
                                воспользуйтесь лицензией.
                            </p>
                        </div>
                    </div>

                    <div class="section__gallery-right-block">
                        <div class="slider-container swiper-container">
                            <!-- Additional required wrapper -->
                            <div class="swiper-wrapper">
                                <!-- Slides -->
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-1.jpg" class="js-smartPhoto" data-caption="Caption 1"
                                        data-id="id-1">
                                        <img src="img/gallery/gallery-slider/slide-1-img-1.jpg" data-group="group"
                                            class="gallery-img">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-2.jpg" class="js-smartPhoto" data-caption="Caption 2"
                                        data-id="id-2">
                                        <img src="img/gallery/gallery-slider/slide-1-img-2.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-3.jpg" class="js-smartPhoto" data-caption="Caption 3"
                                        data-id="id-3">
                                        <img src="img/gallery/gallery-slider/slide-1-img-3.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-4.jpg" class="js-smartPhoto" data-caption="Caption 4"
                                        data-id="id-4">
                                        <img src="img/gallery/gallery-slider/slide-1-img-4.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-5.jpg" class="js-smartPhoto" data-caption="Caption 5"
                                        data-id="id-1">
                                        <img src="img/gallery/gallery-slider/slide-1-img-5.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-1-img-6.jpg" class="js-smartPhoto" data-caption="Caption 6"
                                        data-id="id-6">
                                        <img src="img/gallery/gallery-slider/slide-1-img-6.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-1.jpg" class="js-smartPhoto" data-caption="Caption 7"
                                        data-id="id-7">
                                        <img src="img/gallery/gallery-slider/slide-2-img-1.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-2.jpg" class="js-smartPhoto" data-caption="Caption 8"
                                        data-id="id-8">
                                        <img src="img/gallery/gallery-slider/slide-2-img-2.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-3.jpg" class="js-smartPhoto" data-caption="Caption 9"
                                        data-id="id-9">
                                        <img src="img/gallery/gallery-slider/slide-2-img-3.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-4.jpg" class="js-smartPhoto" data-caption="Caption 10"
                                        data-id="id-10">
                                        <img src="img/gallery/gallery-slider/slide-2-img-4.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-5.jpg" class="js-smartPhoto" data-caption="Caption 11"
                                        data-id="id-11">
                                        <img src="img/gallery/gallery-slider/slide-2-img-5.jpg" data-group="group">
                                    </a>
                                </div>
                                <div class="slider-slide swiper-slide">
                                    <a href="slide-2-img-6.jpg" class="js-smartPhoto" data-caption="Caption 12"
                                        data-id="id-12">
                                        <img src="img/gallery/gallery-slider/slide-2-img-6.jpg" data-group="group">
                                    </a>
                                </div>

                            </div>
                            <!-- If we need pagination -->
                            <div class="slider-pagination swiper-pagination"></div>

                            <!-- If we need navigation buttons -->
                            <div class="slider-btn-prev swiper-button-prev"></div>
                            <div class="slider-btn-next swiper-button-next"></div>
                        </div>
                    </div>

                </div>
                <p class="section__gallery-left-block-descr2">
                    Вам предоставляется 10 бесплатных скачиваний. Для увеличения количества скачиваний
                    <a href="#" class="section__gallery-left-block-link">авторизуйтесь,</a> либо
                    воспользуйтесь лицензией.
                </p>
            </div>
            </div>

.section__gallery-wrap{
    display: flex;
}

.section__gallery-left-block{
    display: flex;
    max-width: 400px;
    flex-direction: column;
    justify-content: space-between;
}

.slider-container {
    max-width: 1150px;
}

.swiper-button-next, .swiper-button-prev{
    top:55%
}

.swiper-button-next{
    right: 0;
}

.swiper-button-prev{
    left: 0;
}

.slider-slide{
    max-width: 350px;
    max-height: 350px;
}

.slider-slide img{
    width: 100%;
    height: 100%;
}

Answer 1

What and where?