Margin causing navigation not to display correctly

Question

I have a simple sticky navigation bar that is wrapped inside a div that has 40px of margin each side. The fixed navbar has a width of 100% so it should just take up all the space it can inside its parent wrapper div. On the left side it appears to take the parent margin into account but on the right side it just seems to overflow. I have tried overflow hidden on the parent but it doesn't seem to do the trick. I know I am missing something very simple here but I just cant put my finger on it.

$(window).scroll(function() {
  if ($(window).width() > 768) {
    if ($(document).scrollTop() > 100) {
      $('header').addClass('nav-border');
    } else {
      $('header').removeClass('nav-border');
    }
  }
});

$('.burger-icon').click(function() {
  $(this).toggleClass('burger-active');
  $('.main-nav').fadeToggle();
  $('body').toggleClass('nav-scroll-lock');
});

.test-div {
  height: 1800px;
  width: 100%;
  background: black;
}

.main-wrapper {
  margin: 0 40px;
}

.container {
  max-width: 800px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}

header {
  background-color: #fff;
  position: fixed;
  width: 100%;
  z-index: 99;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-family: sans-serif;
}

.navbar {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo {
  position: relative;
  z-index: 1000;
  background: #151515;
  padding: 8px;
}

.logo a {
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  letter-spacing: 1px;
}

.burger-icon {
  position: relative;
  z-index: 1000 !important;
  -ms-flex-item-align: end;
}

.burger-icon .burger-line {
  width: 40px;
  height: 3px;
  background-color: #282828;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.burger-icon.burger-active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-icon.burger-active .burger-line:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

.burger-icon.burger-active .burger-line:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.main-nav {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.92);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

.nav-items {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-items li {
  padding: 25px 0;
}

.nav-items li a {
  font-size: 35px;
  font-weight: 700;
  color: #282828;
  text-transform: uppercase;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.nav-border {
  .border-bottom: 1px solid rgba(75, 78, 83, 0.2);
  -webkit-box-shadow: 0 1px 10px #999;
  box-shadow: 0 1px 10px #999;
}

.show-nav {
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  <header>
    <div class="container">
      <div class="row">
        <div class="col navbar">
          <div class="logo">
            <a href="index.php">Logo</a>
          </div>
          <div class="burger-icon">
            <span class="burger-line"></span>
            <span class="burger-line"></span>
            <span class="burger-line"></span>
          </div>
        </div>
      </div>
      <nav class="main-nav">
        <ul class="nav-items">
          <li class="wow fadeIn" data-wow-delay=".2s"><a href="index.php" class="active">One</a></li>
          <li class="wow fadeIn" data-wow-delay=".4s">
            <a href="about.php">Two</a>
          </li>
          <li class="wow fadeIn" data-wow-delay=".6s">
            <a href="projects.php">Three</a>
          </li>
          <li class="wow fadeIn" data-wow-delay=".8s">
            <a href="contact.php">Four</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="test-div">

      </div>
    </div>
  </div>
</div>

Answer 1

A possible solution is to specify a left and right value to keep the element 40px from the edge on both sides and remove the width.

header {
  background-color: #fff;
  position: fixed;
  left:40px;
  right:40px;
  z-index: 99;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-family: sans-serif;
}

Answer 2

The header is overlapping because the position fixed is always relative to the Document. that means by default it will take the width of the document... I suggest to see this example to fix it Fixed position but relative to container

Answer 3

change width of header to width: calc(100% - 80px);.

80px is the margin of both side.

$(window).scroll(function() {
  if ($(window).width() > 768) {
    if ($(document).scrollTop() > 100) {
      $('header').addClass('nav-border');
    } else {
      $('header').removeClass('nav-border');
    }
  }
});

$('.burger-icon').click(function() {
  $(this).toggleClass('burger-active');
  $('.main-nav').fadeToggle();
  $('body').toggleClass('nav-scroll-lock');
});

body{
  margin:0
}
.test-div {
  height: 1800px;
  width: 100%;
  background: black;
}

.main-wrapper {
  margin: 0 40px;
}

.container {
  max-width: 800px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto
}

.row {
  margin-left: -15px;
  margin-right: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.col {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0px;
  flex: 1 1 0;
}

header {
  background-color: #fff;
  position: fixed;
  width: calc(100% - 80px);
  z-index: 99;
  -webkit-transition: all .3s;
  transition: all .3s;
  font-family: sans-serif;

}

.navbar {
  height: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.logo {
  position: relative;
  z-index: 1000;
  background: #151515;
  padding: 8px;
}

.logo a {
  font-weight: 700;
  color: #fff;
  font-size: 18px;
  letter-spacing: 1px;
}

.burger-icon {
  position: relative;
  z-index: 1000 !important;
  -ms-flex-item-align: end;
}

.burger-icon .burger-line {
  width: 40px;
  height: 3px;
  background-color: #282828;
  display: block;
  margin: 5px auto;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.burger-icon.burger-active .burger-line:nth-child(2) {
  opacity: 0;
}

.burger-icon.burger-active .burger-line:nth-child(1) {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

.burger-icon.burger-active .burger-line:nth-child(3) {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.main-nav {
  position: fixed;
  background-color: rgba(255, 255, 255, 0.92);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}

.nav-items {
  display: block;
  position: relative;
  text-align: center;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.nav-items li {
  padding: 25px 0;
}

.nav-items li a {
  font-size: 35px;
  font-weight: 700;
  color: #282828;
  text-transform: uppercase;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.nav-border {
  .border-bottom: 1px solid rgba(75, 78, 83, 0.2);
  -webkit-box-shadow: 0 1px 10px #999;
  box-shadow: 0 1px 10px #999;
}

.show-nav {
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-wrapper">
  <header>
    <div class="container">
      <div class="row">
        <div class="col navbar">
          <div class="logo">
            <a href="index.php">Logo</a>
          </div>
          <div class="burger-icon">
            <span class="burger-line"></span>
            <span class="burger-line"></span>
            <span class="burger-line"></span>
          </div>
        </div>
      </div>
      <nav class="main-nav">
        <ul class="nav-items">
          <li class="wow fadeIn" data-wow-delay=".2s"><a href="index.php" class="active">One</a></li>
          <li class="wow fadeIn" data-wow-delay=".4s">
            <a href="about.php">Two</a>
          </li>
          <li class="wow fadeIn" data-wow-delay=".6s">
            <a href="projects.php">Three</a>
          </li>
          <li class="wow fadeIn" data-wow-delay=".8s">
            <a href="contact.php">Four</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <div class="container">
    <div class="row">
      <div class="test-div">

      </div>
    </div>
  </div>
</div>