Make a div inside another its header - html

Question

This one is a little difficult to explain: I have one div within another, but the inside div is supposed to act like a header to the containing div. The problem is that I need padding in the containing div, so the contained will always adjust to the padding. How do I keep the padding of the container, but have the contained snap to top, left and right with 0 margin?
Here's the code:
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit. Integer vel dolor nibh. Nulla dignissim lacinia orci eget pellentesque. Donec id scelerisque metus. Proin eleifend finibus tellus at malesuada. Praesent bibendum, est bibendum sagittis dignissim, mi magna imperdiet quam, nec laoreet massa ante et arcu. Sed imperdiet nec dolor vitae eleifend. Duis non velit faucibus purus hendrerit dapibus sit amet id est. In consequat dapibus ornare. Sed vel leo purus.</p>
</div>
And the CSS:
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
padding: 0 2% 2% 2%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.notification .notification_head {
width: 100%;
background: #fc2929;
color: #ffffff;
display: inline-block;
padding: 0.5%;
}
This is what it looks like:

Answer 1

Simply don't use paddings on container elements. Use paddings on inner contextual block-level elements p, h1, h2, ul, ol... etc:
*{margin:0;padding:0;} /* Ugly reset */
p, h1, h2, h3/*etc*/{
padding:15px;
}
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
overflow:auto;
}
.notification .notification_head {
background: #fc2929;
color: #ffffff;
}
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit.</p>
</div>
the above will give you the simplest and cleanest result

Answer 2

You need to create another div with you text and make padding/margins as you want.
.notification {
border: 1px solid #fc2929;
border-radius: 7px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.notification .notification_head{
width: 100%;
background: #fc2929;
color: #ffffff;
display: inline-block;
}
.notification_text {
margin: 15px;
}
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<div class="notification_text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue nibh vel velit posuere, eu rhoncus purus interdum. Praesent urna metus, mollis sed blandit ut, bibendum at neque. Aenean nulla metus, faucibus eget metus pharetra, ullamcorper placerat quam. Aenean euismod sagittis hendrerit. Integer vel dolor nibh. Nulla dignissim lacinia orci eget pellentesque. Donec id scelerisque metus. Proin eleifend finibus tellus at malesuada. Praesent bibendum, est bibendum sagittis dignissim, mi magna imperdiet quam, nec laoreet massa ante et arcu. Sed imperdiet nec dolor vitae eleifend. Duis non velit faucibus purus hendrerit dapibus sit amet id est. In consequat dapibus ornare. Sed vel leo purus.</p>
</div>
</div>