How do I give an element padding without the text going off the right side of mobile screen?

Question

I am using responsive design that gives an element 100% width. There are three paragraphs of text within the element and I want to give the text 10px of padding so it isn't sitting right up against the edge of the screen.

I use overflow-x: hidden; on the body, html elements to stop sideways scrolling on phone browsers.

Currently when I give the container element 10px of padding the text runs off the right side of the screen.

How can I give an element 10px padding, 100% width and have a 10px gap between the text and the right edge of the mobile screen?

Answer 1

You can use following CSS for that element (or all elements if you want!),

element
{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; /* standard */
}

Please refer to,

http://www.paulirish.com/2012/box-sizing-border-box-ftw/