CSS/SCSS only works as an inline style in the div, and does not work if I use a class or an id

CSS/SCSS only works as an inline style in the div, and does not work if I
use a class or an id

I have many imported SCSS files for third party plugins which could be the
problem, but essentially if I directly use the style attribute (inline
style) in the div the intended behavior works. But, if I create a class or
even an ID it does not apply to it.
Any suggestions on what to look into or immediate corrections would be
greatly appreciated.
<div class="box" style="margin-left: 50px; margin-right: 50px">
<div class="padded" >
<%= @step.description %>
</div>
</div>
However, when I change the above code to below, and add class to
custom.css.scss - it does not work:
<div class="box description">
<div class="padded" >
<%= @step.description %>
</div>
</div>
.description {
margin-left: 50px;
margin-right: 50px
}