title: Adding Padding to hover-tile bourbon
body: <p>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.</p>
  
  <p>This is the HTML:</p>
  
  <pre><code>&lt;div class="hover-tile-outer"&gt;
    &lt;div class="hover-tile-container"&gt;
      &lt;div class="hover-tile hover-tile-visible"&gt;&lt;/div&gt;
      &lt;div class="hover-tile hover-tile-hidden"&gt;
        &lt;h4&gt;Hidden Copy&lt;/h4&gt;
        &lt;p&gt;Lorem ipsum dolor provident eligendi fugiat ad exercitationem   sit amet, consectetur adipisicing elit. Unde, provident eligendi.&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the SCSS:</p>
  
  <pre><code>.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 &gt; .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;
    }
  }
  }
  </code></pre>
  
  <p>I write this in my home.scss file that I use for the page:</p>
  
  <pre><code>.hover-tile-outer
    padding: 100px 0
    +outer-container
  </code></pre>
  
  <p>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.</p>
  
  <p>Thank you in advance for the help.</p>