I'm having some trouble with this code:

CSS: 

```
div#header
{
    width: 100%;
    background-color: #252525;
    padding: 10px 0px 10px 15px;
    position: relative;
}

div#login
{
    float: right;
    position: absolute;
    right: 10px;
    top: 5px;
}

```

HTML:

```
<div id="header">
    <img src="./img/logo.jpg" />
    <div id="login">
        <form id="header-login" action="#">
            <input type="text" /> <input type="text" /> <input type="submit" value="LOGIN" />
        </form>
    </div>
</div>

```

The div id=header tag has a left padding of 15px. Because of this, the div itself stretches the width of the page, plus an extra 15px to the right, causing me to have a horizontal scrollbar. I've tried putting the header div inside a container div, with relative positioning, but the padding caused the header div to just overflow 15px over the container, still leaving me with the sidebar. Can someone help me with a better understanding? Thanks.