Contained layout

Hi there,

Can you try this CSS:

body {
    margin-left: 5%;
    margin-right: 5%;
    position: relative;
}

Then you should still be able to set the outer container to full and inner container to contained:
https://docs.generatepress.com/article/header-layout/

Let me know if this helps :)

Hello,

no this is not what I am trying to do.

I already got this with Element seting: https://prntscr.com/on7ap7

But I need do add padding inside contained area like on https://prntscr.com/on4ijd

But I do not want this padding on laptop screen, just on wider desktop screan like https://pepperstone.com

Laptop screen https://prntscr.com/on7dc9
Wider screen: https://prntscr.com/on7de5

In order for the container to show up differently on desktop and laptop, we would need to use media query for the code above:

@media (min-width: 1200px) {
    body {
        margin-left: 5%;
        margin-right: 5%;
        position: relative;
    }
}

You can fine tune the breakpoint 1200px.

I would like container to be max 1680px, not margin 5%

How to do this?

Let's try this:

body {
    max-width: 1680px;
    margin: auto;
}

Great, this is what I am trying to do :-)

Thank you :-)

Just one more thing.

I need to do same thing with sticky header

Sticky header is still full width https://prnt.sc/onhmwm

I have solution

.sticky-enabled .main-navigation.is_stuck {
    -webkit-box-shadow: 0px 3px 7px -3px #9e9e9e;
    box-shadow: 0px 3px 7px -3px #9e9e9e;
    background-color: #fff;
    max-width: 1680px;
    margin: 0 auto;
}

Glad you've figured out :)