Отступы в шапке слайдера. Задание width в процентах в scss. Задание max-width в процентах

Question

Верстаю слайдер Фигмовский слайдер. Наверстал следующее

/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: Poppins;
}

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  ._container {
    max-width: 1160px / 1440px * 100%;
    /*padding: 0px 15px;*/
    margin: 0px auto;
    box-sizing: content-box;
    .news {
      //        position: relative;
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h1 {
          //            position: absolute;
          width: 278px / 1160px * 100%;
          height: 60px;
          margin-left: 0px;
          margin-top: 0px;
          margin-right: 322px / 1160px * 100%;
          font-family: Roboto;
          font-style: normal;
          font-weight: 700;
          font-size: 50px;
          line-height: 60px;
          /*120%*/
          color: #527CCD;
        }
        .slider-navigation {
          width: 560px / 1160px * 100%;
        }
      }
    }
  }
}


/*
.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}
*/

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>TestSlider</title>
</head>

<body>
  <div class="wrapper">
    <div class="_container">
      <div class="news">
        <header>
          <h1>Актуальное</h1>
          <div class="slider-navigation">
          </div>
        </header>
      </div>
    </div>
  </div>
</body>

</html>

Вместо css использую scss. В результате получается

Подскажите как сверстать, чтобы было как на макете (в плане отступов от заголовка Актуальное и отступов элемента .slider-navigtion) и в чем была ошибка. Я задавал отступы так

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  ._container {
    max-width: 1160px / 1440px * 100%;
    /*padding: 0px 15px;*/
    margin: 0px auto;
    box-sizing: content-box;
    .news {
      //        position: relative;
      header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        h1 {
          //            position: absolute;
          // ширина заголовка (слова Актуальное)
          width: 278px / 1160px * 100%;
          height: 60px;
          margin-left: 0px;
          margin-top: 0px;
          // отступ вправо от заголовка Актуальное
          margin-right: 322px / 1160px * 100%;
          font-family: Roboto;
          font-style: normal;
          font-weight: 700;
          font-size: 50px;
          line-height: 60px;
          /*120%*/
          color: #527CCD;
        }
        .slider-navigation {
          // ширина полосы слайдера и кнопок прокрутки слайдера
          width: 560px / 1160px * 100%;
        }
      }
    }
  }
}

Код с css следующий

@charset "UTF-8";

/* Обнуление */

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  border: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

ul,
ol,
li {
  list-style: none;
}

img {
  vertical-align: top;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: inherit;
  font-size: inherit;
}

html,
body {
  height: 100%;
  line-height: 1;
  background: #fafafa;
  font-size: 14px;
  color: #fff;
  font-weight: 400;
  font-family: Poppins;
}

.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.wrapper ._container {
  max-width: 80.5555555556%;
  /*padding: 0px 15px;*/
  margin: 0px auto;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

.wrapper ._container .news header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.wrapper ._container .news header h1 {
  width: 23.9655172414%;
  height: 60px;
  margin-left: 0px;
  margin-top: 0px;
  margin-right: 27.7586206897%;
  font-family: Roboto;
  font-style: normal;
  font-weight: 700;
  font-size: 50px;
  line-height: 60px;
  /*120%*/
  color: #527CCD;
}

.wrapper ._container .news header .slider-navigation {
  width: 48.275862069%;
}


/*
.wrapper {
  min-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

._container {
  max-width: 1046px;
  padding: 0px 15px;
  margin: 0px auto;
  box-sizing: content-box;
}
*/

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://fonts.googleapis.com/css?family=Roboto:regular,700&display=swap" rel="stylesheet" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>TestSlider</title>
</head>

<body>
  <div class="wrapper">
    <div class="_container">
      <div class="news">
        <header>
          <h1>Актуальное</h1>
          <div class="slider-navigation">
          </div>
        </header>
      </div>
    </div>
  </div>
</body>

</html>

Поменял в ._container свойство max-width на width и все заработало как на макете. Возникает вопрос как в ._container задать max-width, чтобы это не влияло на верстку неправильным образом?

Answer 1

Если я правильно понял, то попробую предложить вариант. Если нужно сделать так, как на макете, то можно создать родительский div, в этом диве создавай ещё 2 дива

<div class='zagolovok'>
  <h1>Заголовок</h1.
</div>
<div class='slider'>slider here</div>,

для родительского блока пропиши width:100%, и display: flex. Далее, можно прописать для обоих дочерних блоков width:50%. Теперь попробуй позиционировать дочерние блоки так, как тебе нужно, можно использовать для них так же display: flex, justify-content: left - для заголовка и justify-content: center для слайдера.

БЛОГ НА HUSL

Отступы в шапке слайдера. Задание width в процентах в scss. Задание max-width в процентах

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