How to stop the wrapper div top part from overlapping its color with the header?

Hello Carlos. How are you? Sharing a code, would definitely help a ton as, in coding, there's no 100% accurate and working answer to solve a specific problem. One problem can possibly be tackled in various different ways. So sharing a workspace or a snippet of your code on the codepen or jsfiddle would be of great help.

Anyways, one of the ways that I can think of, being capable of solving your problem, is the position property. Something like:

#wrapper_div {
  position: absolute 
/* Though, since it's a wrapper, its' position property value should probably be set to relative, but than again, without the code it's only a wild guess */

  top: /* insert a value  */;
/* Here you should input the exact px, % or vh value that will offset the element on the Y axis from the top; this should offset the element from either a closest ancestor element with a relative position value or perhaps from the element's initial position on a page  */
}

Are you perhaps floating some of the elements on your header? If so, be sure to include the "clearfix". To do so, insert the code below to your stylesheet :

.cf::before,
.cf::after {
  content: '',
  display: table;
}

cf:after {
  clear: both;
}

and add a class " .cf " to a parent of the floating elements (in this case, that would be the header), since it height collapsed if you floated its' children elements.

If none of the above solved your problem, please upload your code so we can have a close look and eventually debug it.

Best of luck! Cheers

Hi Ognjen and Alex,

Here's a screenshot of what's happening:

And here's my html and css snippets:

I am kinda a beginner, so, am not sure if I am giving you the right information. Please let me know if you need more and what. I haven't used Codepen or JSfiddle yet, but can figure it out, if you need a live example. Thanks.