Ok, codepen here. If you click on the h1's and the buy / pdf buttons - you can see the border-bottom slightly. It seems the display: inline-block is causing it. Any suggestions here?

http://codepen.io/wragen22/full/sqrlD

Give the buy/pdf buttons a class or ID tag and this will apply any SCSS/CSS to that specific button. @andy_unleash is right, you're applying the properties to every "a" element in your document (you have an "a" style that is global with border-bottom: 2px solid transparent;).

I can see you have actually set a SCSS selector called ".font-btns {"

Check this for the updated SCSS. All I did was apply:

border:0;

to

.font-btns {
  list-style: none;
  margin: 0 auto 20px auto;
  padding: 0;
  text-align: center;
  
  li {
    display: inline;
  }

  a {
    background: white;
    color: #e05f5a;
    display: inline-block;
    padding: 6px;
    font-size: 15px;
    border:0; /* Added the property here */
    @include box-shadow(inset 0 0 10px rgba(0, 0, 0, 0.5));
  }
}

and this removed the border directly.

The global property will cause every "a" link to display that transparent border.

Change the "a" property at the top of your CSS to this (remove the border):

a {
  text-decoration: none;
  color: #101010;
}

And place the border back in to the "nav" with this (adding the border only in the menu):

// ---------------------------------------NAV
.main-nav {  
  font-weight: 500;
  list-style: none;
  margin: 0 auto 80px auto;
  padding: 0;
  text-align: center;
  
  a {
    display: inline-block;
    padding: 5px;
    position: relative;
    border-bottom: 2px solid transparent;  /* Added the property here */
  }

  a:active {
    border-bottom: 2px solid;
  }
  a:hover {
    border-bottom: 2px solid;
    position: relative;
  }

}

Hope this helps!

@wragen - Dude, don't worry about it - this is an issue that will always happen - even long time developers still make these mistakes, it's all part of the problem solving fun!