Align header with row - Sydney Pro

Everyone,

I am attempting to align my header with the rows on the page. I have inserted a few custom CSS parameters such as max width to create margins when viewed on widescreen/ultra large displays; a stylistic choice so that the content isn’t stretched across a 27" display, for instance.

However, I am having trouble getting my header to align with the rows. The header still aligns with the very left of the page.

My site

Here is the CSS:

.page
{
width: 100%;
max-width: 1600px;
margin: auto !important;
}

.slide-inner
{
width: 100%;
max-width: 1600px;
padding-top: 10%;
}

.container
{
width: 100%;
max-width: 1600px;
margin: auto !important;
}

.home .site-header
{
position: absolute;
top: 0px;
background-color: rgba(76, 76, 78, 0.85);
width: 100%;
max-width: 1600px;
margin: auto !important;
}

Any suggestions?

Thanks,

JU

Just to add…

Everything looks good when viewed on a mobile/tablet, or 15" screen. The content fills the screen, it’s just on a widescreen that the header isn’t aligning with the rest of the content.

Thx.

Hello Justin,

Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

#masthead {
    left: 50%;
    transform: translateX(-50%);
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Thank you Roman,

Will give this a try and report back.

Justin

Success. Thank you Roman.

You are welcome Justin! And have a nice day :slight_smile:

Kind Regards, Roman.