Cacher is the code snippet organizer for pro developers

<header>

        <!-- Logo -->
        <div class="mks-logo">
            <a href="/">
                MakerSquare
            </a>
        </div>

        <!-- Navigation -->
        <nav>
        <a class="nav-link" href="/full-time">
            <span class="nav-text">Full-Time</span>
        </a>
        <a class="nav-link" href="/part-time">
            <span class="nav-text">Part-Time</span>
        </a>
        <a class="nav-link" href="/get-involved">
            <span class="nav-text">Get Involved</span>
        </a>
        <a class="nav-link" href="/about">
            <span class="nav-text">About</span>
        </a>
        <a class="nav-link" href="http://blog.makersquare.com">
            <span class="nav-text">Blog</span>
        </a>
</nav>


    


</header>

<div class="banner banner-home-developers">
    <div class="container">
        <h1 class="tagline">We Create Developers</h1>
    </div>
</div>

body {
  margin: 0;
}

.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 8.47458%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
.container:after {
  content: " ";
  display: block;
  clear: both;
}

header {
  overflow: hidden;
  top: 0;
  left: 0;
  height: 9em;
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 8.47458%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top;
}
header:after {
  content: " ";
  display: block;
  clear: both;
}

.mks-logo {
  outline: 1px solid white;
  top: 65px;
  width: 32.20339%;
  float: left;
  margin-right: 1.69492%;
}

.mks-logo a {
  display: block;
  height: 70px;
}

nav {
  padding-top: 72px;
  width: 66.10169%;
  float: left;
  margin-right: 1.69492%;
  text-align: right;
  font-family: "pluto-sans-condensed-medium", "Geneva", "Franklin Gothic", "Calibri", "Arial Narrow", "Helvetica", sans-serif;
  font-size: 0.875em;
  outline: 1px solid black;
}

a.nav-link {
  display: inline-block;
  transition: color 0.2s linear;
  text-rendering: geometricPrecision;
  color: #174b85;
}

.banner {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 44em;
}

.banner-headline {
  padding-top: 26em;
  padding-bottom: 4em;
}

.tagline {
  font-size: 3.662em;
  color: white;
  margin-bottom: 0.25em;
}

.banner-home-developers {
  background: red;
  height: 600px;
  padding: 200px 0;
}

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----

@import "susy";

$susy: (
  flow: ltr,
  output: float,
  math: fluid,
  container: 1280px,
  container-position: center,
  last-flow: from,
  columns: 12,
  gutters: 1/4,
  gutter-position: after,
  global-box-sizing: border-box,
  debug: (
    image: show,
    color: rgba(#66f, .25),
    output: background, // background | overlay
    toggle: top left,
  ),
);

body {margin: 0;}

.container {
    @include container;
}

header {
  overflow: hidden;
  top: 0;
  left: 0;
  height: 9em;
  // position: absolute; // turning this on lets the header overlay the banner... but makes susy go crazy
  width: 100%;
  @include container;
}

.mks-logo {
  // position: absolute; // having this on adds some fun extra space--but not as much as in my local env
  outline: 1px solid white;
  top: 65px;
  @include span(4);
}
  .mks-logo a {
    display: block;
    height: 70px; }

nav {
  padding-top: 72px;
  @include span(8);
  text-align: right;
  font-family: "pluto-sans-condensed-medium", "Geneva", "Franklin Gothic", "Calibri", "Arial Narrow", "Helvetica", sans-serif;
  font-size: 0.875em;
  outline: 1px solid black;
  }

a.nav-link {
  display: inline-block;
  // padding: 12px;
  // margin-right: -3px;
  transition: color 0.2s linear;
  text-rendering: geometricPrecision;
  color: #174b85; }

.banner {
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 44em; }

.banner-headline {
  padding-top: 26em;
  padding-bottom: 4em; }
  .tagline {
    font-size: 3.662em;
    color: white;
    margin-bottom: 0.25em; }


.banner-home-developers {
  background: red;
  height: 600px;
  padding: 200px 0;
}

<header>

        <!-- Logo -->
        <div class="mks-logo">
            <a href="/">
                MakerSquare
            </a>
        </div>

        <!-- Navigation -->
        <nav>
        <a class="nav-link" href="/full-time">
            <span class="nav-text">Full-Time</span>
        </a>
        <a class="nav-link" href="/part-time">
            <span class="nav-text">Part-Time</span>
        </a>
        <a class="nav-link" href="/get-involved">
            <span class="nav-text">Get Involved</span>
        </a>
        <a class="nav-link" href="/about">
            <span class="nav-text">About</span>
        </a>
        <a class="nav-link" href="http://blog.makersquare.com">
            <span class="nav-text">Blog</span>
        </a>
</nav>


    


</header>

<div class="banner banner-home-developers">
    <div class="container">
        <h1 class="tagline">We Create Developers</h1>
    </div>
</div>