Текст располагается не так как нужно, в чем проблема?

Question

Как видите в макете слово "Lorem ipsum dolor sit amet,", идет одной строчкой.

А у меня оно начинает спадать и я никак не могу починить, не знаю что уж делать.

То ли писать по строчке в тег . Подскажите друже.

P.S Не обращайте внимания на блоки я их починю.

.team {
  position: relative;
  height: 915px;
  background-color: #ddedf9;
  bottom: 125px;
  h1 {
    color: #3c4761;
    font-size: 43px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-left: 580px;
    margin-top: 125px;
  }
  .team__line {
    margin-left: 863px;
    margin-top: 20px;
  }
  h4 {
    color: #47526b;
    font-size: 21px;
    margin-top: 35px;
    font-weight: 550;
    margin-left: 555px;
  }
  .team__list {
    display: flex;
    text-align: center;
    justify-content: space-between;
    padding-left: 350px;
    padding-right: 400px;
    margin-top: 80px;
  }
  h2 {
    color: #27283d;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: 600;
    font-family: myriad-pro, sans-serif;
    letter-spacing: 1px;
    margin-top: 40px;
  }
  h5 {
    margin-top: 15px;
    font-size: 16px;
    margin-right: 5px;
    color: #0cade2;
  }
  h6 {
    margin-top: 32px;
    color: #6b7487;
    font-size: 20px;
  }
}

<nav>
  <ul class="team__list">
    <li>
      <img src="../Images/square.png">
      <h2>ANNE HATHAWAY</h2>
      <h5>CEO / Marketing Guru</h5>
      <h6>Lorem ipsum dolor sit amet,
        <p>consectetuer adipiscing elit,</p>
        <p>sed diam nonummy nibh</p>
        <p>euismod tincidunt ut laoreet dolore magna.</p>
      </h6>
    </li>
    <li>
      <img src="../Images/square.png">
      <h2>Kate Upton</h2>
      <h5>Creative Director</h5>
      <h6>Duis aute irure dolor in in
        <p>voluptate velit esse cillum</p>
        <p>dolore fugiat nulla pariatur.</p>
        Excepteur sint occaecat non
        <p>diam proident.</p>
      </h6>
    </li>

</nav>

Answer 1

Банально может не хватать места, плюс у Вас каждая строчка завернута в блочный элемент, и задана центровка, что может провоцировать такой эффект. Я оставил пометки в своем примере, попробуйте применить и посмотреть на результат:

nav {
  // разкоментируйте эту строку для теста width: 150px;
}

.team {
  position: relative;
  height: 915px;
  background-color: #ddedf9;
  bottom: 125px;
}

.team h1 {
  color: #3c4761;
  font-size: 43px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 600;
  margin-left: 580px;
  margin-top: 125px;
}

.team .team__line {
  margin-left: 863px;
  margin-top: 20px;
}

.team h4 {
  color: #47526b;
  font-size: 21px;
  margin-top: 35px;
  font-weight: 550;
  margin-left: 555px;
}

.team .team__list {
  // добавьте минимальную ширину
}

.team .team__list {
  display: flex;
  justify-content: space-between;
  text-align: center;
  padding-left: 350px;
  padding-right: 400px;
  margin-top: 80px;
}

.team h2 {
  color: #27283d;
  font-size: 22px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: myriad-pro, sans-serif;
  letter-spacing: 1px;
  margin-top: 40px;
}

.team h5 {
  margin-top: 15px;
  font-size: 16px;
  margin-right: 5px;
  color: #0cade2;
}

.team h6 {
  margin-top: 32px;
  color: #6b7487;
  font-size: 20px;
}

<nav>
  <ul class="team__list">
    <li>
      <img src="../Images/square.png">
      <h2>ANNE HATHAWAY</h2>
      <h5>CEO / Marketing Guru</h5>
      <h6>Lorem ipsum dolor sit amet,
        <p>consectetuer adipiscing elit,</p>
        <p>sed diam nonummy nibh</p>
        <p>euismod tincidunt ut laoreet dolore magna.</p>
      </h6>
    </li>
    <li>
      <img src="../Images/square.png">
      <h2>Kate Upton</h2>
      <h5>Creative Director</h5>
      <h6>Duis aute irure dolor in in
        <p>voluptate velit esse cillum</p>
        <p>dolore fugiat nulla pariatur.</p>
        Excepteur sint occaecat non
        <p>diam proident.</p>
      </h6>
    </li>
</nav>

БЛОГ НА HUSL

Текст располагается не так как нужно, в чем проблема?

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