My site.header is displaced to the right

[fabricacionmecanicae]

I have a problem with my web navigation bar.

The problem is that at the top, the menu is somewhat displaced to the right and I can’t find the code to fix it. I looked in the browser code inspector, but I don’t see that this solves anything:

@media only screen and (min-width: 960px) {

/* Site Header
--------------------------------------------- */

.site-header {
	position: fixed;
	width: 100%;
	z-index: 9999;
}

I need to find the code that makes it scroll to the right. Can anyone help me?

Thanks a lot!

[DaveMaxwell]

Screenshot? I don’t see anything wrong.

[PaulOB]

Maybe they want the header lined up with the content width.

e.g.

.site-header .wrap{
max-width:1140px;
margin:auto;
}

[fabricacionmecanicae]

Sorry, I have not attached a photo. Looking in the google element inspector you can see it better. As you can see in the screenshot, the header is displaced. On the left side you can see the space and on the right side it is overflowing.

Thanks for the reply.

[fabricacionmecanicae]

That’s not what I want, but thanks anyway

[PaulOB]

@fabricacionmecanicae

On the left side you can see the space and on the right side it is overflowing.

That’s because you didn’t specify a left coordinate for the fixed positioned element and therefore it is placed in an auto position which is offset by the margin on the body meaning the header is 20px to the right and then 100% wide and overflowing the right edge of the viewport by 20px also.

Add this:

.site-header{
left:0;
}

Then it will look like this (which as I mentioned is very wide on my large screen).