I'm having trouble adjusting the margins of an h3 tag using scss in Angular. The scss code seems to be working, but when I nest the h3 tag inside a div tag, the margin adjustments don't take effect.
Could someone help me figure out what's going wrong?
SCSS
// Margin adjustment not working
.subTitle {
h3 {
margin-top: 1px;
}
}
// Margin adjustment works fine without nesting
h3 {
margin-top: 1px;
}
HTML
<div class="row">
<div *ngFor="let post of allPosts" class="col-md-12 blogPost">
<div id="title"><h1>{{post.title}}</h1></div>
<div id="subTitle"><h3>{{post.subTitle}}</h3></div>
<div id="blogContent"><p>{{post.content}}</p></div>
</div>
</div>
JS