CSS hero section layout

Check this pen https://codepen.io/CodingGilbert/pen/yQejrv

How can I place the color blue section (hero section) at the very top of the page w/o breaking the layout? Notice how it breaks the layout when I use position: absolute. This is how hero sections are designed, it’s fairly common.

I’ve always had difficulties designing this type of sections, I want to see how others approach this.

I guess you could give the content a margin-top.

.content {
  margin-top: 108px;
  width: 100%;
  height: 50vh;
  background: orangered;
}