Question: What do I have to do to prevent the following from stretching more than 100%? It obviously stretches to 100% then adds on the padding... Thanks!

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css" media="screen">
        #box {
            width: 100%;
            padding: 20px;
            border: 1px solid #000;
        }
        #box input { 
            width: 100%;
            padding: 5px; 
        }
    </style>
</head>
<body>
    <div id="box">
        <form>
            <input type="text" value="" />
        </form>
    </div>
</body>
</html>

```

Answer: 
Your `width:100%` on the div is altogether unnecessary. Div's are block level elements which automatically expand to 100% of their container. Remove the `width:100%` from your div declaration and the padding will be contained within the parent container, no scrolling or extended width.

DON'T use a negative margin, that's just adding a hack to achieve something simple.

You can use this rule in general: You almost never have to put `width:100%` on a div (I can't think off the top of my head why you would unless it was displayed inline or something) because as mentioned above, block level elements always expand to 100% of their container

*edit: that was dumb to suggest setting width 100% on a div displayed inline as you can't set the dimensions on an inline element*
Create a new `form` rule and move the `padding: 20px;` declaration to it.

```
#box {
    width: 100%;
    border: 1px solid #000;
}

form {
    padding: 20px;
}

```