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.

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.