border-bottom not working correctly - css

Question

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 Jsfiddle
HTML
<div class="container">
<div class="row">
<div class="col-md-12">
<header>
<h1 class="title">Title▲</h1>
</header>
<div class="menu-nav">
<nav class="subnav">
<ul class="tabs">
CSS
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;
}
At first screen border is in correct place
At the second tab, this same border appears over another

Answer 1

just add class row to #about_us or better wrap your code under #about_us inside a <div class="row">..content under #about_us..</div>. Bootstrap grid system classes like .col-md-3 should always be wrapped inside .row to avoid CSS float problem
Mechanism
grid classes starting with .col- use float:left to get aligned one after other and maintain precise dimensions. So its parent will lose all height (a classic CSS float problem). Now adding class row resolves this cleanly with adding a clearfix because it adds a pseudo element with clear:both.
.row:after {
content: " ";
clear:both;
display:block;
}

Answer 2

Your issue is you have multiple styles as #pankajPhartiyal said.
remove this line from border-bottom: 1px solid #ccc; from article{} in styles section
Demo