Make boxed layout content flush with nav

Hi there,

lets start with the Header:

1. Customizer > Layout > Header and set the Left and Right Padding to 0
2. You currently have some CSS that is making the header a flex row and setting the three child flex items to 33%. Remove that and try this:

#masthead.site-header .inside-header {
    flex-direction: row;
    justify-content: space-between;
}

For the site content... what happens when the browser viewport is the same width as the Container ? If we strip the padding there for alignment then the sidebar content is going to butt up against the viewport

Brilliant! Thank you David.

I'd also like to get the sidebars to be flush too. Please could you tell me how?

Kind regards
Damon

OK so we need to keep the padding when the screen is less then the container width.
And you have the Content Layout set to One Container ... so i would do the following:

1. Customizer > Layout > Sidebars - remove the widget padding ie. set them all to 0.
2. Then a little CSS to force the alignment:

.site.grid-container {
    max-width: 1280px;
}

the max-width value is equal to the ( Custmzr > Layout > Container ) Content Width + Left Padding + Right Padding.
So if you change any of those values you need to update the max value to match.

Noice! Thank you David.

Glad to be of help!!