title: blank space between navbar and iframe
body: <p>could someone please help 
  ive come across the below css and html which works great. yet the only problem I have is the blank bar between the navbar and iframe. ive look around google to see what is causing it without success. (may also have something to do with not having a clue what im doing)</p>
  
  <p>here is the style css</p>
  
  <pre><code>    /* -------------------------------- 
  
  Primary style
  
  -------------------------------- */
  *, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  *::after, *::before {
    content: '';
  }
  
  body {
    font-size: 100%;
    font-family: "PT Sans", sans-serif;
    color: #f8f7ee;
    background-color: #f8f7ee;
  }
  
  a {
    color: #f05451;
    text-decoration: none;
  }
  
  /* -------------------------------- 
  
  Main components 
  
  -------------------------------- */
  header {
    position: relative;
    height: 160px;
    line-height: 180px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  header h1 {
    font-size: 20px;
    font-size: 1.25rem;
  }
  
  
  .cd-tabs {
    position: relative;
    width: 100%;
    height:100%;
  
  }
  .cd-tabs:after {
    content: "";
    display: table;
    clear: both;
  }
  .cd-tabs::after {
    /* subtle gradient layer on top right - to indicate it's possible to scroll */
    position: absolute;
    top: 0;
    right: 0;
    height: 60px;
    width: 50px;
    z-index: 1;
    pointer-events: none;
    background: -webkit-linear-gradient( right , #f8f7ee, rgba(248, 247, 238, 0));
    background: linear-gradient(to left, #f8f7ee, rgba(248, 247, 238, 0));
    visibility: visible;
    opacity: 1;
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s;
  }
  .no-cssgradients .cd-tabs::after {
    display: none;
  }
  .cd-tabs.is-ended::after {
    /* class added in jQuery - remove the gradient layer when it's no longer possible to scroll */
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
  }
  .cd-tabs nav {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: #f8f7ee;
    box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
  }
  
  @media only screen and (min-width: 960px) {
    .cd-tabs nav {
      position: relative;
      float: none;
      background: transparent;
      box-shadow: none;
    }
  }
  
  .cd-tabs-navigation {
    width: 360px;
  }
  .cd-tabs-navigation:after {
    content: "";
    display: table;
    clear: both;
  }
  .cd-tabs-navigation li {
    float: left;
  }
  .cd-tabs-navigation a {
    position: relative;
    display: block;
    height: 60px;
    width: 60px;
    text-align: center;
    font-size: 12px;
    font-size: 0.75rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 700;
    color: #c3c2b9;
    padding-top: 34px;
  }
  .no-touch .cd-tabs-navigation a:hover {
    color: #29324e;
    background-color: rgba(233, 230, 202, 0.3);
  }
  .cd-tabs-navigation a.selected {
    background-color: #ffffff !important;
    box-shadow: inset 0 2px 0 #000000;
    color: #29324e;
  }
  
  .plex {
    background-color: #ffffff !important;
    box-shadow: inset 0 1px 0 #000000;
    color: #29324e;
  }
  
  .cd-tabs-navigation a::before {
    /* icons */
    position: absolute;
    top: 12px;
    left: 50%;
    margin-left: -10px;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url("../img/vicons.svg");
    background-repeat: no-repeat;
  }
  .cd-tabs-navigation a[data-content='inbox']::before {
    background-position: 0 0;
  }
  .cd-tabs-navigation a[data-content='new']::before {
    background-position: -20px 0;
  }
  .cd-tabs-navigation a[data-content='gallery']::before {
    background-position: -40px 0;
  }
  .cd-tabs-navigation a[data-content='store']::before {
    background-position: -60px 0;
  }
  .cd-tabs-navigation a[data-content='settings']::before {
    background-position: -80px 0;
  }
  .cd-tabs-navigation a[data-content='trash']::before {
    background-position: -100px 0;
  }
  .cd-tabs-navigation a[data-content='dog']::before {
    background-position: -120px 0;
  }
  .cd-tabs-navigation a[data-content='inbox'].selected::before {
    background-position: 0 -20px;
  }
  .cd-tabs-navigation a[data-content='new'].selected::before {
    background-position: -20px -20px;
  }
  .cd-tabs-navigation a[data-content='gallery'].selected::before {
    background-position: -40px -20px;
  }
  .cd-tabs-navigation a[data-content='store'].selected::before {
    background-position: -60px -20px;
  }
  .cd-tabs-navigation a[data-content='settings'].selected::before {
    background-position: -80px -20px;
  }
  .cd-tabs-navigation a[data-content='trash'].selected::before {
    background-position: -100px -20px;
  }
  .cd-tabs-navigation a[data-content='dog'].selected::before {
    background-position: -120px -20px;
  }
  
  @media only screen and (min-width: 960px) {
    .cd-tabs-navigation {
      /* tabbed on top on big devices */
      width: auto;
      background-color: #f8f7ee;
      box-shadow: inset 0 -2px 3px rgba(203, 196, 130, 0.06);
    }
    .cd-tabs-navigation a {
      height: 60px;
      line-height: 60px;
      width: auto;
      text-align: left;
      font-size: 14px;
      font-size: 0.875rem;
      padding: 0 2.8em 0 4.6em;
    }
    .cd-tabs-navigation a.selected {
      box-shadow: inset 0 2px 0 #ffffff;
    }
    .cd-tabs-navigation a::before {
      top: 50%;
      margin-top: -10px;
      margin-left: 0;
      left: 38px;
    }
  }
  
  .cd-tabs-content {
    background: #ffffff;
    height:100%;
    border:0;
  
  }
  .cd-tabs-content li {
    display: none;
  
  }
  .cd-tabs-content li.selected {
    display: block;
    -webkit-animation: cd-fade-in 0.5s;
    -moz-animation: cd-fade-in 0.5s;
    animation: cd-fade-in 0.5s;
  }
  .cd-tabs-content li p {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1.6;
    color: #8493bf;
    height:100%;
  }
  
  @media only screen and (min-width: 960px) {
    .cd-tabs-content {
      min-height: 1000px;
    }
    .cd-tabs-content li {
  
    }
    .cd-tabs-content li p {
      font-size: 16px;
      font-size: 1rem;
    }
  }
  
  @-webkit-keyframes cd-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @-moz-keyframes cd-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes cd-fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  </code></pre>
  
  <p>and here is the html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" class="no-js"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'&gt;
  
      &lt;link rel="stylesheet" href="css/reset.css"&gt; &lt;!-- CSS reset --&gt;
      &lt;link rel="stylesheet" href="css/style.css"&gt; &lt;!-- Resource style --&gt;
      &lt;script src="js/modernizr.js"&gt;&lt;/script&gt; &lt;!-- Modernizr --&gt;
  
  
      &lt;title&gt;Responsive Tabbed Navigation | CodyHouse&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="cd-tabs"&gt;
      &lt;nav&gt;
          &lt;ul class="cd-tabs-navigation"&gt;
              &lt;li&gt;&lt;a data-content="inbox" class="selected" href="#0"&gt;NZBGet&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="new" href="#0"&gt;CouchPotato&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="gallery" href="#0"&gt;Sonarr&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="store" href="#0"&gt;PlexPy&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="settings" href="#0"&gt;PlexRequests&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="trash" href="#0"&gt;Plex&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a data-content="dog" href="#0"&gt;DogNZB&lt;/a&gt;&lt;/li&gt;
  
          &lt;/ul&gt; &lt;!-- cd-tabs-navigation --&gt;
      &lt;/nav&gt;
  
      &lt;ul height="100%" class="cd-tabs-content"&gt;
          &lt;li data-content="inbox" class="selected"&gt;
              &lt;iframe width="100%" height="1000px" src="NZB GET URL HERE" style="border:none"&gt;&lt;/iframe&gt;
          &lt;li data-content="new"&gt;
              &lt;iframe width="100%" height="1000px" src="COUCHPOTATO URL HERE" style="border:none"&gt;&lt;/iframe&gt;
          &lt;li data-content="gallery"&gt;
              &lt;iframe width="100%" height="1000px" src="SONARR URL HERE" style="border:none"&gt;&lt;/iframe&gt;
  
          &lt;li data-content="store"&gt;
              &lt;iframe width="100%" height="1000px" src="PLEXPY URL HERE" style="border:none"&gt;&lt;/iframe&gt;
          &lt;/li&gt;
  
          &lt;li data-content="settings"&gt;
          &lt;iframe width="100%" height="1000px" src="PLEXREQUESTS URL HERE" style="border:none"&gt;&lt;/iframe&gt;
          &lt;li data-content="trash"&gt;
              &lt;iframe width="100%" height="1000px" src="PLEX URL HERE" style="border:none"&gt;&lt;/iframe&gt;  
          &lt;/li&gt;
          &lt;li data-content="dog"&gt;
              &lt;iframe width="100%" height="1000px" src="DOG NZB HERE OR ANY OTHER INDEXER" style="border:none"&gt;&lt;/iframe&gt;
          &lt;/li&gt;
      &lt;/ul&gt; &lt;!-- cd-tabs-content --&gt;
  &lt;/div&gt; &lt;!-- cd-tabs --&gt;
  
  &lt;script src="js/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="js/main.js"&gt;&lt;/script&gt; &lt;!-- Resource jQuery --&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I would really appreciate the help</p>