title: border-bottom not working correctly
body: <p>I have a strange problem, i have 3 tab menu items, that have text,after text i set up border-bottom, it's working fine for first-menu tab, but for other 2 it's appears over another border-bottom, but when i put code in Jsfiddle it's works correctly.. Here is my code <a href="http://jsfiddle.net/kani339/4dL8qb0g/" rel="nofollow noreferrer">Jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;header&gt;
                      &lt;a href="#"&gt;&lt;h1 class="title"&gt;Title&lt;/a&gt;&lt;a href="#" id="show-about-btn"&gt;&amp;#9650;&lt;/a&gt;&lt;/h1&gt;
                  &lt;/header&gt;
                  &lt;div class="menu-nav"&gt;  
                      &lt;nav class="subnav"&gt;
                          &lt;ul class="tabs"&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
      background-color: #E5E5E5;
  
  }
  
  a:link{
      text-decoration:none !important;
  }
  
  .title{
      margin-top: 150px;
      font-size: 450%;
      font-weight: bold;
      letter-spacing: 3px;
      margin-left: 10px;
      border-bottom: 1px solid #ccc;
  }
  
  .title a,
  .title a:visited,
  .title a:link {
      color: black;
  }
  
  
  .title a:hover,
  .title a:link {
      text-decoration: none;
      color: #2bb673;
  }
  
  #show-about-btn {
      font-size: 40%;
      margin-left: 10px;
      color: #2bb673;
  }
  
  
  /*Navigation*/
  
  .subnav {
      height: 80px;
      line-height: 3em;
      border-bottom: 1px solid #ccc;
  }
  
  .subnav li {
      list-style: none;
      float: left;
      padding: 1px 40px 1px 1px;
  }
  
  .subnav ul li a.active {
      padding: 6px;
      background-color: #2bb673;
      color: #fff;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      -o-border-radius: 20px;
      border-radius: 20px;
      text-decoration: none;
  }
  
  .subnav li a {
      color: #2bb673;
      font-weight: 600;
      font-size: 12px;
      text-transform: uppercase;
      position: relative;
      right: 30px;
  }
  
  .subnav a:hover {
      text-decoration: none;
      color: black;
      -webkit-transition: all .3s ease-in;
      -moz-transition: all .3s ease-in;
      -o-transition: all .3s ease-in;
      transition: all .3s ease-in;
  }
  
  article {
      font-size: 16px;
      font-family: arial, sans-serif;
      display: block;
      border-bottom: 1px solid #ccc;
  }
  
  .tab {
      position: relative;
      top: 12px;
      font-size: 12px;
  }
  
  .menu-nav {
      display: none;
  }
  
  .tab p,h5{
      padding-bottom: 25px;
  }
  
  .tab h4 {
      margin-top: 5px;
      font-weight: bold;
  }
  
  .tab h5 {
      font-size:18px;
  }
  
  .tab img {
      margin-left: 50px;
      margin-bottom: 10px;
  }
  
  /*Content*/
  
  .our-work a {
      font-family: "Literaturnaya Italic";
      font-style: italic;
      font-weight: 400;
      font-size: 46px;
      margin-top: 5px;
      color: black;
  }
  </code></pre>
  
  <p>At first screen border is in correct place</p>
  
  <p><a href="https://i.stack.imgur.com/L9dRO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/L9dRO.png" alt="enter image description here"></a></p>
  
  <p>At the second tab, this same border appears over another
  <a href="https://i.stack.imgur.com/zxAaC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zxAaC.png" alt="enter image description here"></a></p>