1

На протяжении всего кода, данное свойство работало. Но в классе marketing оно перестало работать. Почему? (ссылка на rectangle2 - это всегда самая длинная линия) введите сюда описание изображения

.design {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 435px;
  margin-top: 30px;
}

.procent {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 280px;
  margin-top: -26px;
}

.rectangle2 {
  margin-top: -5px;
  margin-left: 77px;
}

.rectangle1 {
  margin-top: -18px;
  margin-left: 77px;
}

.development {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 390px;
  margin-top: 33px;
}

.procent1 {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 192px;
  margin-top: -27px;
}

.rectangle4 {
  margin-top: -5px;
  margin-left: 77px;
}

.rectangle3 {
  margin-top: -18px;
  margin-left: 77px;
}

.marketing {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 450px;
  margin-top: 30px;
}

.procent2 {
  text-align: center;
  color: #1d1d1d;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  font-size: 12px;
  word-spacing: 2px;
  letter-spacing: 0.5px;
  margin-right: 300px;
  margin-top: -27px;
}

.rectange7 {
  margin-top: -5px;
  margin-left: 77px;
}

.rectangle5 {
  margin-top: -18px;
  margin-left: 77px;
}
<!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>
</head>

<body>
  <!--Professional Skills-->
  <div class="skills">
    <div class="smth">
      <h3 class="titelpr">Professional Skills</h3>
      <!--UI/UX Design-->
      <p class="design">UI/UX DESIGN</p>
      <p class="procent">75%</p>
      <!--Rectangles for UI/UX Design-->
      <div class="rectangle2">
        <img src="rectangle2.png" alt="">
      </div>
      <div class="rectangle1">
        <img src="rectangle1.png" alt="">
      </div>
      <!--Web-delepoment-->
      <p class="development">WEB DEVELOPMENT </p>
      <p class="procent1">90%</p>
      <!--Rectangles for Web development-->
      <div class="rectangle4">
        <img src="rectangle2.png" alt="">
      </div>
      <div class="rectangle3">
        <img src="rectangle3.png" alt="">
      </div>
      <!--marketing-->
      <p class="marketing">MARKETING</p>
      <p class="procent2">65%</p>
      <!--Rectangles for marketing-->
      <div class="rectangle7">
        <img src="rectangle2.png" alt="">
      </div>
      <div class="rectangle5">
        <img src="rectangle5.png" alt="">
      </div>
    </div>


</body>

</html>

1 ответ 1

0

предполагаю, потому что

.**rectange7** {
    margin-top: -5px;
    margin-left: 77px;
}

не содержит буквы l

))) (rectangLe != rectange) НО! это не банальная опечатка, вы осознано создали условия для своей ошибки, используя неинформативные названия для классов. Рекомендую Вам почитать про именование классов в css (а-ля БЭМ методология).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.