DIV with width set to 100% overlaps wrapper, CSS Question?

[cookertron]

.wrapper
{[INDENT]margin: 5px 5px 5px 5px;[/INDENT][INDENT]padding: 2px 2px 2px 2px;[/INDENT][INDENT]width: 220px;[/INDENT][INDENT]height: 305px;[/INDENT][INDENT]background-color: rgb(85,85,85);[/INDENT]
}

.title
{[INDENT]padding-top: 5px;[/INDENT][INDENT]padding-bottom: 5px;[/INDENT][INDENT]padding-left: 10px;[/INDENT][INDENT]background-color: rgb(136,136,136);[/INDENT][INDENT]width: 100%;[/INDENT]
}

<div class="wrapper">[INDENT]<div class="title">[/INDENT][INDENT][INDENT]Enter you login details here:[/INDENT][/INDENT][INDENT]</div>[/INDENT]
</div>

As you can see the title div it outside it's wrapper. i've looked up a bit about inheritance but i'm a bit of a layman.

[JKing]

It's because of the padding you have set on your title class particularly the padding-left. This has to do with the way the box model works. It is adding the extra 10px of padding on top of setting its width equal to the width of the parent div.

Divs are block elements and therefore by default take up all the available width with a line break before and after them. Remove width:100% from your title class and it should perform as intended.