padding around slider

[walkoffhomerun]

how can i add padding around a slider? I tried to add padding to the <div id="example2" class="slider-pro"> and separately <div class="sp-slides"> by adding bootstrap padding callouts since i am using bootstrap but the carousel disappeared and when opening element inspector in a browser i see slider pro adds some of it's own padding and margin stuff.

so i know it's possible but maybe in the CSS file? part of the the javascript config file? but i cannot find any padding in the api

[davidghi]

You can try this:

.slider-pro {
    padding: 30px;
}

[walkoffhomerun]

i did. slider disappears or nothing happens. i mentioned that in the message above as something i previously tried. what happens is that it successfully adds padding to the top, bottom, left side but the right side overhangs the container and the overhang is 2x. so if i set padding to 30px then the right side overhangs 30px then the padding is applied to the right of that so now the page is 60px wider and i get the scroll bar at the bottom of the page to you can scroll that 60 extra pixel width

[davidghi]

It works for me, so it might be a problem specific to your implementation. I can take a look if you post a link. Also, if you want the padding to be included in the size you've set for the slider, you need to add:

.slider-pro {
    box-sizing: border-box;
}

[walkoffhomerun]

the border-box looks like it did the trick and made the padding work. thanks