Space between navbar tabs

I'm working on a navbar and I got a blank space between tabs that I can't get rid of. I'm looking to merge the tabs without changing the width and height of of the tabs and the menu content, just looking to modify the css, ty.

Here's the navbar and the jfiddle http://jsfiddle.net/u42vvvq2/

    var handleClick = function(link, index) {
      link.addEventListener('click', function(e) {
        e.preventDefault();
        goToTab(index);
      });
    };

    var goToTab = function(index) {
      if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) {
        tabNavigationLinks[activeIndex].classList.remove('is-active');
        tabNavigationLinks[index].classList.add('is-active');
        tabContentContainers[activeIndex].classList.remove('is-active');
        tabContentContainers[index].classList.add('is-active');
        activeIndex = index;
      }
    };

    return {
      init: init,
      goToTab: goToTab
    };

  };


  window.tabs = tabs;

})();


var myTabs = tabs({
  el: '#tabs',
  tabNavigationLinks: '.c-tabs-nav__link',
  tabContentContainers: '.c-tab'
});

myTabs.init();


(function(i, s, o, g, r, a, m) {
  i['GoogleAnalyticsObject'] = r;
  i[r] = i[r] || function() {
    (i[r].q = i[r].q || []).push(arguments)
  }, i[r].l = 1 * new Date();
  a = s.createElement(o),
    m = s.getElementsByTagName(o)[0];
  a.async = 1;
  a.src = g;
  m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-34160351-1', 'auto');
ga('send', 'pageview');
::after,
::before {
  box-sizing: inherit
}
html {
  box-sizing: border-box
}
body,
html {
  margin: 0;
  padding: 0;
  height: 100%
}
body {
  color: #6d6d6d;
  background-color: #fff;
  font-family: Oxygen, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.8
}
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #3b3b3b;
  font-weight: 700;
  line-height: 1.2
}
a {
  color: #dc446e;
  text-decoration: none
}
a:hover {
  color: #9d1d41
}
b,
strong {
  font-weight: 700
}
img {
  max-width: 100%;
  height: auto
}
.o-container {
  margin: 0 auto;
  padding: 0 12px;
  max-width: 960px
}
@media all and (min-width: 480px) {
  .o-container {
    padding: 0 24px
  }
}
@media all and (min-width: 720px) {
  .o-container {
    padding: 0 48px
  }
}
#tabs {
  display: flex

}
.c-tabs-nav {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 10px;
  list-style: none;
  margin: 0;
  padding: 0;
  width:79px;

 
}
.vertical {
  flex:1;
}
.c-tabs-nav__link {
  flex: 0 0 100%;
  margin-bottom: 0px;
  padding: 0;
  color: #fff;
  background-color: #b3b3b3;
  text-align: center;
  -webkit-transition: color .3s;
  transition: color .3s;
  height:78px;

 
}
.c-tabs-nav__link:last-child {
  margin-right: 0
}
.c-tabs-nav__link:hover {
  color: #6d6d6d
}
.c-tabs-nav__link.is-active {
  color: #dc446e;
  background-color: #e7e7e7
}
.c-tabs-nav__link i,
.c-tabs-nav__link span {
  margin: 0;
  padding: 0;
  line-height: 1
}
.c-tabs-nav__link i {
  font-size: 18px
}
.c-tabs-nav__link span {
  display: none;
  font-size: 18px
}
@media all and (min-width: 720px) {
  .c-tabs-nav__link i {
    margin-bottom: 12px;
    font-size: 22px
  }
  .c-tabs-nav__link span {
    display: block
  }
}
.c-tab {
  display: none;
  background-color: #e7e7e7;
  width:1590px;
}
.c-tab.is-active {
  display: block
}
.c-tab__content {
  padding: 1.5rem
}

<div class="o-main" style="padding-right:2200px;">
  <div class="o-container" style="padding-left:0px;">
    <div class="o-section">
      <div id="tabs" class="c-tabs no-js" style="width:8520px;height:895px;">
        <div class="c-tabs-nav" >
          <a href="#" class="c-tabs-nav__link is-active">
            <i class="fa fa-home"></i>
            <span>Home</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-book"></i>
            <span>Books</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-heart"></i>
            <span>Favourites</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-calendar"></i>
            <span>Calendar</span>
          </a>
          <a href="#" class="c-tabs-nav__link">
            <i class="fa fa-cog"></i>
            <span>Settings</span>
          </a>
        </div>
        <div class="c-tab is-active">
          <div class="c-tab__content">
            <h2>Welcome home!</h2>
            <p>Home ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
          </div>
        </div>
        <div class="c-tab">
          <div class="c-tab__content">
            <h2>All Books</h2>
            <p>Books ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
          </div>
        </div>
        <div class="c-tab">
          <div class="c-tab__content">
            <h2>Your Favourites!</h2>
            <p>Favourites ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
          </div>
        </div>
        <div class="c-tab">
          <div class="c-tab__content">
            <h2>Stay Busy</h2>
            <p>Calendar ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
          </div>
        </div>
        <div class="c-tab">
          <div class="c-tab__content">
            <h2>Change It Up</h2>
            <p>Settings ipsum dolor sit amet, consectetur adipisicing elit. Ipsam quo minus voluptate unde tempore eveniet consequuntur in, quod animi libero rem similique pariatur quos, et eum nisi ducimus, architecto voluptatibus!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto aspernatur natus dolorem fuga cumque optio saepe corrupti earum. Ipsam quaerat asperiores similique omnis excepturi temporibus ab eum magnam ipsa, odio.</p>
          </div>
        </div>
      </div>
    </div>