How to limit the site header to content width in Genesis Sample

The New Genesis Sample have no max-width CSS for site header which makes the site header full width. This tutorial provides the steps to limit the site header content under <wrap> in Genesis Sample 2.6.0+

Default:

After:

You can see that default max-width like .site-inner have a max-width: 1140px; with a padding of 30px to left and right.

We will use the same width for our site header wrap.

Add the following CSS in style.css

.site-header .wrap {
    max-width: 1140px;
    margin: 0 auto;
}

and we will remove padding from .site-header and will add it under .site-header .wrap

use this (recommended).

.site-header {
    padding: 0;
}

.site-header .wrap {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 30px;
}

.site-header .nav-primary .wrap {
    padding: 0;
}