border-bottom not working correctly

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>
                    <a href="#"><h1 class="title">Title</a><a href="#" id="show-about-btn">&#9650;</a></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;
}