SCSS Margin-top Не работает, если внутри вложенного класса

Question

Я работаю над прототипом, который оформлен с использованием SCSS, По какой-то причине, когда я ставлю margin-top: 0; на родительский элемент он не вступает в силу. Когда я ставлю margin-top внутри вложенных классов это работает. Может кто-нибудь объяснить, что я делаю не так? Вот полный фрагмент кода, который не работает так, как задумано:

.form__row{
 margin-top: 0;

 &__error-message{
  color: $color--negative;
 }

 &__success-message{
  color: $success-body-text;
 }

 &__attention-message{
  color: $attention-body-text;
 }

 &__info-message{
  color: $info-body-text;
 }
}

Вот фрагмент кода, который работает, но имеет плохой дизайн:

.form__row{

 &__error-message{
  color: $color--negative;
  margin-top: 0;
 }

 &__success-message{
  color: $success-body-text;
  margin-top: 0;
 }

 &__attention-message{
  color: $attention-body-text;
  margin-top: 0;
 }

 &__info-message{
  color: $info-body-text;
  margin-top: 0;
 }
}

И наконец, вот HTML-код, отображаемый так:

<div class="detail-group__row ">
 <p class="form__row__success-message">
   <span class="icon-check small" aria-hidden="true"></span>

   Lorem ipsum dolor sit amet consecutir.
  </p>
</div>