Here's a challenge I'm facing: I have nested divs where the inner one acts as a header for the outer div. The issue arises when I try to add padding to the outer container, causing the inner one to adjust accordingly. How can I maintain the padding of the container while ensuring the inner div aligns perfectly with zero margins on top, left, and right?
Below is the code snippet:
<div class="notification">
<div class="notification_head">
<p>Testing a notification.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</div>
And here's the corresponding 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 how it appears: