Skip to content

Padding to the right side of row

An answer to this question on Stack Overflow.

Question

I am working on a design with twitter bootstrap 2 (responsive). In this design, I have a header, left sidebar, content and footer.

Basically, I have the following code structure - have a look at http://jsfiddle.net/w4yh9/3/

The important section is the:

<div id="inner" class="span10">
...
</div>

Please have a look at the attached screenshot, especially the yellow marked area:

Padding problem

I have the following question / problem: How can I add some padding to the right for all content elements (success message, content, table) - it should work on smaller screens as well?

Answer

You could try using

#main {padding-right:5px}

But maybe that makes #main wider than you'd like.

In that case, you could use

#main > div { width:98%; }
#main > .navbar {width:100%; }

to set all children divs of main to 98% width, and then over-ride this for the (hopefully limited number of) specific children that you want to be full-width.