title: SCSS Margin-top Not working unless inside nested class
body: <p>I am working on a prototype that is styled using <code>SCSS</code>. For some reason, when I put the <code>margin-top: 0;</code> on the parent element, it is not taking effect. When I put the <code>margin-top</code> inside the nested classes, it works. Can someone explain what I am doing wrong? Here is the full code snippet that doesn't work how it is intended:</p>
  
  <pre><code>.form__row{
   margin-top: 0;
  
   &amp;__error-message{
    color: $color--negative;
   }
  
   &amp;__success-message{
    color: $success-body-text;
   }
  
   &amp;__attention-message{
    color: $attention-body-text;
   }
  
   &amp;__info-message{
    color: $info-body-text;
   }
  }
  </code></pre>
  
  <p>Here is the code snippet that works but is poor design:</p>
  
  <pre><code>.form__row{
  
   &amp;__error-message{
    color: $color--negative;
    margin-top: 0;
   }
  
   &amp;__success-message{
    color: $success-body-text;
    margin-top: 0;
   }
  
   &amp;__attention-message{
    color: $attention-body-text;
    margin-top: 0;
   }
  
   &amp;__info-message{
    color: $info-body-text;
    margin-top: 0;
   }
  }
  </code></pre>
  
  <p>Lastly, here is the HTML as rendered:</p>
  
  <pre><code>&lt;div class="detail-group__row "&gt;
   &lt;p class="form__row__success-message"&gt;
     &lt;span class="icon-check small" aria-hidden="true"&gt;&lt;/span&gt;
  
     Lorem ipsum dolor sit amet consecutir.
    &lt;/p&gt;
  &lt;/div&gt;
  </code></pre>