Bootstrap 3 box based layout padding without effecting gutter

Question

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.

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 :/

<div class="col-md-12">
    <div class="row">
        <div class="col-md-6">
            <div class="box">
                <div class="box-inner">
                    <h1>Test2</h1>
                </div>
            </div>
        </div>
    </div>
</div>

Any help would be very appreciated! I've been banging my head against the wall for hours.

Fiddle here, I highlighted the problem areas with a comment: http://jsfiddle.net/kbj8dd0e/6/

Answer 1

Sure you can add padding. Just add it to the .box.

Have a look at this:
http://jsfiddle.net/kbj8dd0e/5/
(note that I changed the col-md to col-xs to make it show better in that small fiddle pane, but the same should work for any col class.)

All I did was move the padding to the .box class to be able to remove the redundant .box-inner. I also removed all your instances of <div class="row"><div class="col-md-12">...</div></div> as this just adds markup and serves no purpose whatsoever.

Or am I missing something here?