how do adjust right margin when increasing margin-left

Question

I am styling a div that contains the main content of my web page. The header has it's own div and correctly spans the page 100%.

I added a margin-left:125px style to the main content div and now the right edge exceeds 100% of the browser width.

How do I compensate for the this? Thanks

Answer 1

I'm not really sure if its what you are trying to do, but:

    <style type="text/css">
        #Header {
            background: red;
        }

        #Content {
            margin-left: 125px;
            background: green;
        }
    </style>
    <div id="Header">
        &nbsp;
    </div>
    <div id="Content">
        &nbsp;
    </div>

You don't need width:100%, because block level elements will automatically take all the width they can, unless specified otherwise.