UL의 네비게이션 바 요소 아래 라인을 추가

Question

나는 내가 UL하에 HR 태그를 추가하기 위해 노력하고있어 template i'm trying to integrate

아래 그림처럼 메뉴 바 아래 라인을 가지고 PSD 템플릿을 통합하기 위해 노력하고있어 목록하지만 난 뭔가 잘못하고있어 그리고 그것은 나타나지 않습니다.

code screenshot

도움

<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> 

을 감상 할 수있다.

Answer 1

당신은 너무처럼 그것을 전체 뷰포트의 폭과 작은 높이 사업부를 제공 할 수 있습니다 : 그것은 바로 탐색 컨테이너 외부

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

위치를.