Adding Padding to hover-tile bourbon

Im using bourbon, neat, and bitters for my new site. I used a Refill Component for my site. This is very simple and im new to both sass and bourbon, but I cannot seem to simply add padding to an existing hover-tile module I copied from the Refills/Componenets page.

This is the HTML:

<div class="hover-tile-outer">
  <div class="hover-tile-container">
    <div class="hover-tile hover-tile-visible"></div>
    <div class="hover-tile hover-tile-hidden">
      <h4>Hidden Copy</h4>
      <p>Lorem ipsum dolor provident eligendi fugiat ad exercitationem   sit amet, consectetur adipisicing elit. Unde, provident eligendi.</p>
    </div>
  </div>
</div>

And this is the SCSS:

.hover-tile-outer {
  $base-border-color: gainsboro !default;
  $base-line-height: 1.5em !default;
  $medium-screen: em(640) !default;
  $hover-tile-height: 10em;

background:   url("https://raw.githubusercontent.com/thoughtbot/refills/master/source/i  mages/mountains.png");
background-position: top;
background-size: cover;
background-color: beige;
border: 1px solid $base-border-color;
cursor: pointer;
height: $hover-tile-height;
margin-bottom: $base-line-height;

@include media($medium-screen) {
  width: 40%;
}

.hover-tile-container {
  height: $hover-tile-height;
  overflow: hidden;
}

.hover-tile-container:hover > .hover-tile {
@include transform(translate(0, -100%));
}

.hover-tile {
  @include transition(all, 0.2s ease-in-out);
  background: inherit;
  color: white;
  height: inherit;
  overflow: hidden;
  padding: $base-spacing;
}

.hover-tile-hidden {
  background: transparentize(#000, 0.5);

  p {
    color: transparentize(#fff, 0.3);
    line-height: $base-line-height;
  }

  h4 {
    margin: 0 0 0.5em 0;
  }
}
}

I write this in my home.scss file that I use for the page:

.hover-tile-outer
  padding: 100px 0
  +outer-container

Should that not create a 100px padding on the top? because I have 4 of these modules sitting on top of each other and they are all touching each other, and the topmost one is touching the hero module right above it. However, the outer-container is working because they are all lined up in the center, but none of them have padding. Did I put the padding in the wrong place? Is there another way to add padding? I am very new to this and apperently everyone else can figure it out, because google searching for this has not helped one bit.

Thank you in advance for the help.

Solution

Try yo add !important tag to your SCSS rules. Also, If you are writing SCSS you can't call a mixin with the + sign' you have to write @include.

Change this:

.hover-tile-outer 
    padding: 100px 0
    +outer-container

To this:

.hover-tile-outer {
        padding: 100px 0 !important
        @include outer-container
}