background on the header.

When I set before header, the menu is located out of the image..

It's alright. It's just the structure we're going for.

Now, try adding this through Appearance > Customize > Additional CSS:

.header-wrap {
    position: relative !important;
}

.header-wrap > .main-navigation {
    position: absolute;
    bottom: 15%;
    left: 50%;
    z-index: 100;
    width: 100%;
    transform:translateX(-50%);
}

You may alter 15% to your preferred vertical position for the menu.

THere is no way to put the menu inside??

Have you tried the code above? How did it go?

Thank you!! it works now!!

You're welcome, Jusung!