Q:

How can I fix this responsive navigation bug?

I am banging my head as I am trying to get my responsive navigation to work correctly but I am encountering a bug that really irks me and I just want to know what is the best and cleanest way to solve it. You can see this live on CodePen
What I have set up is a centered navigation and a logo in the middle and I have margins to surround the logo, all of this is in a media query 
/* Desktop specific nav
 =====================================================*/
  @media (min-width: 45em) {
 }

the problem comes in when I use a media query to display my mobile navigation (what I was trying to do was get rid of the margins so it will display in a block). You can see the bug if you resize your browser right around when it is supposed to change to mobile (you'll notice the "contact" somewhere at the bottom and the margins messed up, I am trying to get rid of this entirely so it goes straight from desktop to mobile without that little glitch)
  /* Mobile nav
 =====================================================*/

  @media (max-width: 44.99999999em) {
 }

My complete markup
<header class="main"> 
      <nav class="nav-collapse" >

       <a href="#about" class="main_link first">ABOUT</a>
       <a href="#skills" class="main_link">PORTFOLIO</a>
       <a href="#" class="sprite-main_logo sprite">LOGO</a>
       <a href="#section_about " class="main_link">BLOG</a>
       <a href="#contact" class="main_link last">CONTACT</a>

      </nav> 

</header>

CSS
   @media (min-width: 45.0000em) {

      header a.main_link {
      display: inline-block;
      width: 80px;
      margin-right: 40px;
      margin-left: 40px;
      vertical-align: bottom;
      font-size: 18px;
      line-height: 1.278;
      font-size: 1.125rem;
      text-decoration: none;
      color: #000;
      font-family: 'PT Sans Narrow', sans-serif;
     }

      header.main>div {
      background: #ffffff;
      padding: 30px 0px 40px 0px;
      box-shadow: 0 2px 0 2px rgba(242, 242, 242, 0.75);
    }

      header.main {
      text-align: center;
    }

      header a.sprite-main_logo {
      display: inline-block;
      vertical-align: bottom;
      margin: 0px 89px;
    }

      header a.main_link.last {
      margin-right: 0;
    }

      header a.main_link.first {
      margin-left: 0;
    }

}

  @media (max-width: 44.99999999em) {

   .nav-collapse,
   .nav-collapse * {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }

    .nav-collapse,
    .nav-collapse  {
        list-style: none;
        width: 100%;
        float: left;
        position: relative;
        margin-bottom: 10px;
        display: block;

        }

    .nav-collapse a {
        float: left;
        width: 100%;
        border-bottom: 1px solid #f4f4f4;
        margin-bottom: 5px;
        padding-bottom: 10px;
        padding-top: 10px;

            }

    .nav-collapse a:last-child {
        border-bottom: none;
    }

    .nav-collapse a:nth-child(3) {
        display: none;
    }

    .nav-collapse a {
        color: #444;
        text-decoration: none;
        width: 100%;
        background: #ffffff;
        padding-left: 10px;
    }

Thanks for viewing!

A:

In your header a.main_link You are using display:inline-block so you're white space is being included in the width.  You have a few options to fix it:

Delete all white-space between elements in your HTML.
Set the font-size to zero on .nav-collapse.
Use display: block and float your menu items.
Compensate for the space with negative margins on your .nav-collapse a

I personally prefer option 3, but it's really up to you.
UPDATE
I'm glad you got it working with option three. But just for the record, here is a working demo which uses inline-block:  DEMO.  I struggled with this for a bit, and in the end I found that there was actually a left/right margin being added to <body>.  So I added:
body{
  margin:0 !important;
}

And that did it.

