Edit width of the burger menu content but keep background full width

Question

I'm very new to coding and am trying to create a website as practice, but I've hit a brick wall.

I want my navigation to have a full width background, but the content to be constrained to 1180px

I've tried using

width: 1180px;
margin: 0 auto;

the issue that I'm having is that doing this contained the clicked burger menu background.

html:

<header class="header">
  <a href="/" class="logo">LOGO</a>
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
  <ul class="menu">
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</header>

css:

.header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 3;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #1a1a1a;
}

.header li a {
  display: inline-block;
  padding: 20px 20px;
  text-decoration: none;
  color: #B3B3B3;
}

.header li a:hover {
  color: #fff;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 240px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

https://codepen.io/zwirled/pen/PoPjxym

Any help is much be appreciated!

Thanks

Answer 1

The problem is position:fixed. Use a div element as a position aid. The elements will take the div element as the containing block element. It being its direct descendant. Take the input element out of the div element to control the drop down. Add the margin: 0 auto for both the li and the position aid.

HTML:

<header class="header">
  <input class="menu-btn" type="checkbox" id="menu-btn" />
  <div class="positionaid"> 
    <a href="/" class="logo">LOGO</a>
    <label class="menu-icon" for="menu-btn">
      <span class="navicon"></span>
    </label>
   </div>
    <ul class="menu">
     <li><a href="#work">Work</a></li>
     <li><a href="#about">About</a></li>
     <li><a href="#contact">Contact</a></li>
    </ul>
</header>

CSS:

.header {
  left: 0px;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 3;
}
.header li, .positionaid {
   width:1080px;
   margin: 0 auto;
}

Good luck.