Контент выходит за контейнер

Question

В section class="section-promo" находится слайдер, в котором 1 слайд должен быть по контейнеру, а последующие слайдеры выходят за контейнер. Поэтому слайду где нужен контейнер дописал класс . Заметил что конкретно этот контейнер больше других на 20px. Пытался найти дублирующий padding, прошерстил весь код, не нашел.

UPDATE: Нашел костыльное решение. Для контейнера находящегося в .top-slide уменьшил на 20px свойство max-width. Корректно ли это?

.top-slide .container {
  max-width: 1200px;
 }

html {
  box-sizing: border-box;
}

*,
*::after,
*::before {
  box-sizing: inherit;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #1b1b1b;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

.container {
  max-width: 1220px;
  padding-left: 10px;
  padding-right: 10px;
  margin: 0 auto;
}

.header {
  margin-bottom: 100px;
}

.header__inner {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
}

.header__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  text-transform: uppercase;
  margin-left: auto;
}

.menu {
  margin-right: 185px;
  margin-left: 130px;
}

.menu__item {
  margin-bottom: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.user-nav {
  display: flex;
  gap: 0 20px;
}

.section-promo {
  margin-bottom: 150px;
}

.top-slide {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 0 center;
}

.top-slide__inner {
  min-height: 700px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-slide__content {
  flex-basis: 183px;
  margin-top: -142px;
}

.top-slide__title {
  font-family: 'Playfair Display', serif;
  font-weight: 400;
  font-size: 70px;
  line-height: 1.3;
  text-transform: uppercase;
  margin-bottom: 55px;
}

.top-slide__subtitle {
  font-size: 24px;
  margin-bottom: 10px;
}

.top-slide__descr {
  margin-bottom: 20px;
}

.top-slide__btn {
  display: inline-block;
  padding: 21px 55px;
  font-weight: 700;
  text-transform: uppercase;
  color: #7449bb;
  border: 1px solid #7449bb;
  margin-left: auto;
  transition: all 0.5s;
}

.top-slide__btn:hover {
  color: #ffffff;
  background-color: #7449bb;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  content: none;
}

.arrow-container {
  max-width: 1200px;
  padding: 0;
  position: relative;
  padding-top: 50px;
}

.swiper-button-next {
  left: 75px;
  right: auto;
}

.brand-descr {
  margin-bottom: 150px;
}

.brand-descr__inner {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-left: 200px;
}

.brand-descr__content {
  flex-basis: 387px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet" />

  <link rel="stylesheet" href="css/reset.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" href="css/style.css" />
</head>

<body>
  <header class="header container">
    <div class="header__inner">
      <a href="#" class="logo">
        <img src="images/logo.svg" alt="Logo" />
      </a>
      <h3 class="header__title">LA COLLECTION PRIVÉE CHRISTIAN DIOR</h3>
      <nav class="menu">
        <ul class="menu__list">
          <li class="menu__item">
            <a href="#" class="menu__link">WOMEN'S FRAGRANCE</a>
          </li>
          <li class="menu__item">
            <a href="#" class="menu__link">MEN'S FRAGRANCE</a>
          </li>
          <li class="menu__item">
            <a href="#" class="menu__link">MAKEUP</a>
          </li>
          <li class="menu__item">
            <a href="#" class="menu__link">SKINCARE</a>
          </li>
          <li class="menu__item">
            <a href="#" class="menu__link">DIOR SPA</a>
          </li>
        </ul>
      </nav>
      <ul class="user-nav">
        <li class="user-nav__item">
          <a href="#" class="user-nav__link">
            <img src="images/liked.svg" alt="Liked" class="user-nav__img" />
          </a>
        </li>
        <li class="user-nav__item">
          <a href="#" class="user-nav__link">
            <img src="images/basket.svg" alt="basket" class="user-nav__img" />
          </a>
        </li>
      </ul>
    </div>
  </header>
  <section class="section-promo">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="top-slide">
            <div class="top-slide__inner container">
              <img src="images/slider/1.jpg" alt="Parfume" />
              <div class="top-slide__content">
                <h1 class="top-slide__title">GRIS DIOR</h1>
                <p class="top-slide__subtitle">Fragrance</p>
                <p class="top-slide__descr">
                  With Gris Dior you dare to reveal your most surprising, mysterious and unexpected facets.
                </p>
                <a href="#" class="top-slide__btn">DISCOVER</a>
              </div>
              <img src="images/slider/2.jpg" alt="parfume and Famele" />
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="top-slide" style="background-image: url(/images/slider/backgound-img-1.jpg)">
            <div class="top-slide__inner container">
              <a href="#" class="top-slide__btn">YOUR NEW EXPERIENCE</a>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="top-slide" style="background-image: url(/images/slider/backgound-img-2.jpg)">
            <div class="top-slide__inner container">
              <a href="#" class="top-slide__btn">YOUR NEW EXPERIENCE</a>
            </div>
          </div>
        </div>
      </div>
      <div class="container arrow-container">
        <div class="swiper-button-prev">
          <img src="images/slider/arrow-left.svg" alt="arrow left" />
        </div>
        <div class="swiper-button-next">
          <img src="images/slider/arrow-right.svg" alt="arrow right" />
        </div>
      </div>
    </div>
  </section>
  <section class="brand-descr container">
    <div class="brand-descr__inner">
      <div class="brand-descr__content">
        <h1 class="brand-descr__title">DARE IN GRIS DIOR</h1>
        <p class="brand-descr__descr">
          Gris Dior is the olfactory expression of gray, the iconic color of the House of Dior that embodies the bold spirit of Christian Dior.
        </p>
        <p class="brand-descr__descr">
          A unisex eau de parfum that defies gender, Gris Dior is an intense chypre fragrance that makes a strong, recognizable statement, a fragrance you adopt and interpret to suit your own rules.
        </p>
        <p class="brand-descr__descr">
          Gris Dior uninhibitedly combines heritage with a modern twist and plays the unisex card with confidence. It is multifaceted and not as obvious as it seems, like the color gray, richly nuanced with its subtleties, anything but a simple mix of black and
          white.
        </p>
      </div>
      <div class="brand-descr__content">
        <p class="brand-descr__descr brand-descr__descr_black">
          A backdrop for all desires, revealing all shades: dare to go gray with Gris Dior.
        </p>
        <p class="brand-descr__descr brand-descr__descr_black">
          A bold embodiment of this elusive color, Gris Dior is a light chypre fragrance that has become an icon, an unexpected master of the game. Both a fragrance for women and a fragrance for men, its unisex trail invites uninhibited expression today.
        </p>
      </div>
    </div>
  </section>

  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <script src="js/main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Контент выходит за контейнер

Ответы (0 шт):