Issue with off center header

Question

I am working on this site and can't get the header to center on the home page. It is centered on all other pages. There are many issues with the site but this one is stumping me. Here is the homepage:

https://lavendermobilespa.com/

As you can see the header is pushed to the right.

Here is another page where the header is aligned:

https://lavendermobilespa.com/dallas-tx/

Both headers are from the same Elementor template so I don't think it has to do with something within the header on the homepage. instead, I think something is different on the homepage itself that is causing the header to go off center.

I have inspected both pages with dev tools and the main difference I can see is that the Astra container has these margins where the astra container in the other page does not. However, the rest of the homepage is not effected by these margins. I have tried changing the margins of that element and it skews the entire page off center with a new white bar of empty space on one side. Any help would be greatly appreciated.

Answer 1

Your component with the class .ast-container has a max-width of 1240px on the homepage only, since the header is a child of this element and has position: absolute; with no left value set, its left value is set to the left-most point of .ast-container, which is fine on other pages where this element has 100% width, but on the homepage this means the header gets sent rightwards.

To fix the main issue, set a left: 0; value on the header. Secondary to this, the header also seems to have a width: 90%; value set on it, if you remove this or set it to 100% that will properly centrally align the header