The rule: One should not assign width and padding to the same element.

Why not? Because display width of an element is equal to the assigned width plus any padding. A DIV that’s 100% wide with 10px padding is actually 100% + 20px wide. Put this element on your page and you’ll wind up with horizonal scrollbars and a 20px gap to the right of all your other elements — what joy.

Fortunately, there’s a handy little trick to getting around this (source), namely using POSITION to stretch the element. Let’s start with our little side-scrolling DIV:

<style>
div {
    width: 100%;
    padding: 10px;
}
</style>

We remove the WIDTH declaration, then add POSITION and location declarations, specifically including RIGHT:

<style>
div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 10px;
}
</style>

And suddenly we have a DIV element behaving just like it should.

It does require declaring POSITION, so if that’s not an option then it’s back to wrapping DIVs for you.