ULのナビゲーションバー要素の下の行を追加する

Question

私は私はULの下にHRタグを追加しようとしている template i'm trying to integrate

下の写真のようにナビゲーションバー 下のラインを持っているPSDテンプレートを統合しようとしています私は間違って何かをしているし、それは表示されません。

<nav class="navbar navbar-expand-md" id="navbar-2"> 
<div class="collapse navbar-collapse col-md-12" id="navbarsExampleDefault"> 
    <ul class="navbar-nav mr-auto"> 
    <li class="nav-item active"> 
     <a class="nav-link" href="#"><i class="home-icon fa fa-home fa-2x" aria-hidden="true"></i> <span class="sr-only">(current)</span></a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Accueil </a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Videos</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">FutursStars</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Coachs</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Clubs</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Agents</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Sponsors</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Stars</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Fans</a> 
    </li> 
    <li class="nav-item"> 
     <a class="nav-link" href="#">Medias</a> 
    </li> 
    </ul> 
    <hr class="col-md-12"> 
</div> 

code screenshot

任意の助けいただければ幸いです。

Answer 1

あなたはそれに完全なビューポートの幅などのような小さな高さのdiv与えることができます：それだけのnavコンテナ外

.red-line { 
    width: 100vw; 
    height: 2px; 
    background-color: red; 
} 

ポジションを。