Breaking the box model, cleanly

I'm not giving my name to a robot!

by amindunited

HTML

<div class="bodyWrap">
  <header>
    Header Stuff Here
  </header>
  <div class="notificationWrap">
    <div class="notification">
      Notification
    </div>
  </div>
  <div class="content">
    Content
  </div>

</div>

CSS

header {
  background-color: pink;
  width: 100%;
  height: 55px;
  border-radius: 5px;
}
.content {
  background-color: #cfcfcf;
  border-radius: 5px;
  width: 100%;
  min-height: 200px;
  margin-top: 50px;
}
.notificationWrap {
  width: 100%;
  max-height: 0px;
  background-color: #b1b1b1;
  overflow: visible;
}
.notification {
  position: relative;
  top: 0px;
  background-color: red;
}