Header content padding and max width on mobile and when resizing window

Hello, I'm trying to make my header on my site, in line with the rest of the content on my pages. 

I have set max margins to 1200px, which seemed to work on desktop mode, but as soon as you crop the browser window to a certain point the header content (site logo and menu links) seem to extend past the content on the page, displaying edge to edge on mobile.

Code I have already added in custom css include: 

#header {
    max-width: 1200px;
    margin: auto;
}

Ideally, I would like this to work throughout the whole site, where content does not stretch out and remains at the widest point here. Where the blank white borders close in on the content when resizing a window (negative space beyond red lines indicated).

Thanks

2 hours ago, captainkirk said:

Hello, I'm trying to make my header on my site, in line with the rest of the content on my pages. 

I have set max margins to 1200px, which seemed to work on desktop mode, but as soon as you crop the browser window to a certain point the header content (site logo and menu links) seem to extend past the content on the page, displaying edge to edge on mobile.

 

Code I have already added in custom css include: 

#header {
    max-width: 1200px;
    margin: auto;
}

Ideally, I would like this to work throughout the whole site, where content does not stretch out and remains at the widest point here. Where the blank white borders close in on the content when resizing a window (negative space beyond red lines indicated).

 

Thanks

 

Can you share your website URL?

www.designedbykirk.com

Worked nicely! Thankyou! Would you also know how to do it for other sections including the simple gallery for instance on mobile? 

www.designedbykirk.com/portfolio

Cheers! 

12 hours ago, captainkirk said:

Worked nicely! Thankyou! Would you also know how to do it for other sections including the simple gallery for instance on mobile? 

 

www.designedbykirk.com/portfolio

 

Cheers! 

I think you have did it.

Yes, all figured out, thanks for your assistance

/* Gallery Section Top and Bottom Padding */
.gallery-grid[data-width="inset"] {
  padding-top: 3vw;
  padding-bottom: 1.5vw;
}

/* Gallery Section Left and Rid Padding Mobile Effect */

.gallery-grid[data-width="inset"] {
  padding-right: 6vw;
  padding-left: 6vw;
}