border-bottom не работает правильно

Question

У меня странная проблема, у меня есть 3 элемента меню табуляции, у которых есть текст, после того, как текст установлен в рамку внизу, он отлично работает для вкладки первого меню, но для других 2 появляется через другую границу дно, но когда я положил код в Jsfiddle он правильно работает .. Вот мой код 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; 
} 

на первой границе экрана в сотрудничестве дое правильное место

На второй вкладке, это же граница появляется над другим

Answer 1

просто добавить класс строку #about_us или лучше обернуть свой код под #about_us внутри <div class="row">..content under #about_us..</div>. Загрузочные классы системы сетки как .col-md-3 всегда должны быть обернуты внутри .row, чтобы избежать CSS float problem

Механизма

классов сетки, начиная с .col- использования float:left получить выровнен друг за другие и поддерживать точные размеры. Поэтому его родитель потеряет всю высоту (a classic CSS float problem). Теперь добавление класса row разрешает это с помощью добавления clearfix, поскольку он добавляет псевдоэлемент с clear:both.

.row:after { 
content: " "; 
clear:both; 
display:block; 
} 

Answer 2

Ваш вопрос у вас есть несколько стилей, как сказал @pankajPhartiyal.

удалить эту строку из border-bottom: 1px solid #ccc; из article{} в разделе стилей

Demo