title: Bootstrap 3 box based layout padding without effecting gutter
body: <p>I'm making a box based layout and I'm having issues with the gutters in bootstrap 3. Since they've been changed to be padded since bootstrap 2, every time I want to add padding to a box it completely destroys the gutter. I can't seem to find a way of remedying the problem.</p>
  
  <p>I use a .box class to highlight the box from it's gutter and give them background colours and images. I want padding inside the box for the text so it's not right on the edge of the box walls, so I made a .box-inner class, but I can't just apply padding to it :/</p>
  
  <pre><code>&lt;div class="col-md-12"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-md-6"&gt;
              &lt;div class="box"&gt;
                  &lt;div class="box-inner"&gt;
                      &lt;h1&gt;Test2&lt;/h1&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any help would be very appreciated! I've been banging my head against the wall for hours.</p>
  
  <p>Fiddle here, I highlighted the problem areas with a comment:
  <a href="http://jsfiddle.net/kbj8dd0e/6/" rel="nofollow">http://jsfiddle.net/kbj8dd0e/6/</a></p>