Див выходит за границы раздела

Question

Мой CSS испорчен, я пытался исправить это в течение последних 4 часов, и я не мог это исправить .. У меня есть div внутри другого div, которые все находятся в одном разделе.

Div .app выходит из секции и перемещается вниз по другой секции

Вот картинка, чтобы объяснить лучше:

HTML:

<section id="portfolio" data-aos="fade-right">
      <h1 data-aos="slide-right">My Projects</h1>
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="app">
              <div class="image">
                <img src="../assets/images/coupon.jpg" alt="" />
              </div>
              <ul>
                <li><span> Name: </span> Coupon System</li>
                <li><span>Description:</span> Final project in studies</li>
                <li><span>Back-end:</span> Java,Spring Framework, Hibernate</li>
                <li><span>Front-end:</span> Angular, CSS, Html</li>
                <li><span>Database:</span> MySQL</li>
                <li>
                  <span>Link:</span>
                  <button
                    onclick="window.open('http://coupon1.us-east-2.elasticbeanstalk.com','_blank')"
                  >
                    click here
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </section>

CSS:

.swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}
    #portfolio {
        background: #00ff40;
        padding: 30px 10px 30px 10px;
      }
      .app {
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        height: 100%;
        background-color: #bc2a8d;
      }
      .app .image {
        display: flex;
        flex-direction: column;
        min-width: 100%;
        justify-content: center;
        align-items: center;
        height: 30%;
      }

      .app .image img {
        flex-grow: 1;
        max-width: 100%;
        max-height: 100%;
      }

Как вы также можете видеть, между картинкой и текстом внутри основного элемента div есть большое пространство, которое я хотел бы удалить.

спасибо наизусть!

Обновление: чтобы было легче исправить, я удалил div '.app' и использовал новый с единственным абзацем внутри:

<div class="swiper-container">
        <div class="swiper-wrapper">
          <div>
            <p>
              facilis nobis atque quod eum maxime non aspernatur, consequatur
              ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
              nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
              atque perferendis laboriosam excepturi cum consequuntur deleniti?
              Cumque adipisci asperiores doloremque saepe optio nam temporibus
              labore totam. Provident, amet officiis? Numquam dicta officia
              nulla autem blanditiis ratione. Nam placeat doloribus veniam
              perspiciatis corrupti ratione, odio deserunt repellat, adipisci
              recusandae incidunt culpa fuga aspernatur et temporibus illum
              suscipit reiciendis saepe quam. Iusto illo culpa veritatis
              consequuntur alias quo a nulla soluta eveniet reprehenderit
              sapiente veniam nam, commodi est officiis porro aliquid.
              Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
              quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
              mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
              tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
              doloremque eius quisquam eos ad corrupti. Labore accusantium totam
              eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
              vitae mollitia quae! Molestias laboriosam, sapiente, earum
              accusantium unde aperiam itaque corrupti culpa pariatur maiores
              obcaecati sint illo veniam. Architecto optio minus voluptas
              voluptatum quibusdam, neque odit nihil ex officiis explicabo
              voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
              odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
              minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
              illo enim mollitia quaerat officia commodi optio laborum
              blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
              quam! A, inventore accusantium. Totam quibusdam quam dignissimos
              quisquam reprehenderit quidem tenetur fuga voluptates minus
              praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
              ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
              minus quidem sit, consectetur fugiat obcaecati veritatis,
              architecto aperiam eaque sed delectus vero debitis accusantium
              laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
              provident non iusto dolorem inventore. Excepturi explicabo
              quisquam qui commodi corporis dolore. Minima, beatae alias
              perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
              quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
              ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
              vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
              cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
              officia quasi a error accusamus? Cumque ad, iure necessitatibus
              excepturi animi ipsum debitis distinctio maxime, cupiditate
              impedit vel quis quo explicabo error deleniti accusamus autem
              quae, rerum exercitationem deserunt illo repellat. Enim distinctio
              reprehenderit quas? Quos reiciendis nemo provident porro adipisci
              quam magni perferendis vero error necessitatibus, reprehenderit
              corrupti labore deleniti ea non cumque nobis harum incidunt?
              Commodi ratione quis obcaecati vel eligendi excepturi quasi.
              Libero quae earum neque consequuntur vero tempora! Aliquid
              officiis architecto sunt pariatur maiores consectetur officia
              doloribus iste provident soluta ab, distinctio vel illum
              voluptates nulla ea doloremque odio nemo voluptas.
            </p>
          </div>

результат остается прежним, хотя:

 .swiper-container {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
}

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.swiper-container-multirow > .swiper-wrapper {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transition-property: -webkit-transform;
  transition-property: -webkit-transform;
  -o-transition-property: transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
}
 
 
 #portfolio {
    background: #00ff40;
    padding: 30px 10px 30px 10px;
  }

  #portfolio h1 {
    margin-bottom: 0px;
    margin: 0;
    text-align: center;
    font-size: 20px;
    border-bottom: 3px solid rgb(223, 0, 0);
  }

  .app {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    background-color: #bc2a8d;
  }
  .app .image {
    display: flex;
    flex-direction: column;
    min-width: 100%;
    justify-content: center;
    align-items: center;
    height: 30%;
  }

  .app .image img {
    flex-grow: 1;
    max-width: 100%;
    max-height: 100%;
  }

<section id="portfolio" data-aos="fade-right">
      <h1 data-aos="slide-right">My Projects</h1>
      <!-- Swiper -->
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div>
            <p>
              facilis nobis atque quod eum maxime non aspernatur, consequatur
              ad. Ad, fuga vero? Aut pariatur deserunt nulla incidunt. Possimus
              nesciunt vel at enim. Ea, iste. Doloremque, blanditiis explicabo
              atque perferendis laboriosam excepturi cum consequuntur deleniti?
              Cumque adipisci asperiores doloremque saepe optio nam temporibus
              labore totam. Provident, amet officiis? Numquam dicta officia
              nulla autem blanditiis ratione. Nam placeat doloribus veniam
              perspiciatis corrupti ratione, odio deserunt repellat, adipisci
              recusandae incidunt culpa fuga aspernatur et temporibus illum
              suscipit reiciendis saepe quam. Iusto illo culpa veritatis
              consequuntur alias quo a nulla soluta eveniet reprehenderit
              sapiente veniam nam, commodi est officiis porro aliquid.
              Laboriosam debitis eaque commodi nesciunt earum ipsam voluptates,
              quo ab. Adipisci consequuntur ut hic repellendus? Eligendi
              mollitia, voluptatum sed magni quo aliquam officiis blanditiis qui
              tempore adipisci quasi deserunt, nam reiciendis, non nostrum nemo
              doloremque eius quisquam eos ad corrupti. Labore accusantium totam
              eaque natus iste incidunt praesentium? Voluptatum numquam dolorem
              vitae mollitia quae! Molestias laboriosam, sapiente, earum
              accusantium unde aperiam itaque corrupti culpa pariatur maiores
              obcaecati sint illo veniam. Architecto optio minus voluptas
              voluptatum quibusdam, neque odit nihil ex officiis explicabo
              voluptates quod. Omnis, ab consequuntur! Quam inventore ut non
              odio velit doloribus rem, cum amet iusto quia suscipit? Culpa
              minus fuga harum saepe voluptatum ipsum non unde, nemo, deleniti
              illo enim mollitia quaerat officia commodi optio laborum
              blanditiis corporis laboriosam, tempora obcaecati ipsam eligendi
              quam! A, inventore accusantium. Totam quibusdam quam dignissimos
              quisquam reprehenderit quidem tenetur fuga voluptates minus
              praesentium iste dicta illo eveniet rem eum, sunt omnis quae natus
              ea! Quasi enim voluptatibus non. Doloribus, minus odit. Atque in
              minus quidem sit, consectetur fugiat obcaecati veritatis,
              architecto aperiam eaque sed delectus vero debitis accusantium
              laboriosam corporis nemo exercitationem ex ad. Esse consequuntur,
              provident non iusto dolorem inventore. Excepturi explicabo
              quisquam qui commodi corporis dolore. Minima, beatae alias
              perferendis quaerat deserunt, obcaecati eveniet consectetur, odio
              quos dolor repellat? Aliquid, impedit quasi ratione blanditiis
              ipsam esse odit soluta doloribus. Iste, harum repellendus quaerat
              vel iusto ducimus ratione cumque a magni ipsa nihil, fugiat itaque
              cupiditate quae non incidunt. Modi nesciunt fugiat quam ipsa magni
              officia quasi a error accusamus? Cumque ad, iure necessitatibus
              excepturi animi ipsum debitis distinctio maxime, cupiditate
              impedit vel quis quo explicabo error deleniti accusamus autem
              quae, rerum exercitationem deserunt illo repellat. Enim distinctio
              reprehenderit quas? Quos reiciendis nemo provident porro adipisci
              quam magni perferendis vero error necessitatibus, reprehenderit
              corrupti labore deleniti ea non cumque nobis harum incidunt?
              Commodi ratione quis obcaecati vel eligendi excepturi quasi.
              Libero quae earum neque consequuntur vero tempora! Aliquid
              officiis architecto sunt pariatur maiores consectetur officia
              doloribus iste provident soluta ab, distinctio vel illum
              voluptates nulla ea doloremque odio nemo voluptas.
            </p>
          </div>
          </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </section>

Answer 1

Я думаю, что позиция в вашем CSS вызывает дублирование.

.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
    }
.
.
.
          .app {
            position: absolute;
            display: flex;
            flex-wrap: wrap;
            height: 100%;
            background-color: #bc2a8d;
          }

Попробуйте добавить еще один div вне класса .app , высота которого соответствует содержанию. Или просто удалите позицию.

Я не уверен, почему вы используете эту позицию здесь, поэтому я не могу дать вам альтернативу. Если вы просто хотите отцентрировать его, вы можете попробовать использовать поле.