フル幅ブートストラップ3マルチレベルインラインナビ

Question

マルチレベルインラインナビを100％幅にしようとしていますが、両側にピクセルがあり、次のマルチレベルには2つのピクセルがあります。私は左に試しました：CSSの-1pxしかし、それは右側にいくつかの部屋を残します。これを行う最良の方法は何ですか？

.navbar{ 
 
    border-radius: 0 !important; 
 
    } 
 

 
    .dropdown{ 
 
    list-style: none; 
 
    padding: 1rem 2rem; 
 
    } 
 

 
    .dropdown-menu{ 
 
    width: 100%; 
 
    border-radius: 0; 
 
    margin: 0; 
 
    background-clip: inherit; 
 
    } 
 

 
    .dropdown-menu > li{ 
 
    display: inline-block; 
 
    float: left; 
 
    } 
 

 
    .multi-level > a{ 
 
    padding: 3px 20px; 
 
    }

<nav class="navbar navbar-default"> 
 
     
 
    <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Factory models</a> 
 
     
 
     <ul class="dropdown-menu"> 
 
      <li class="dropdown-submenu"><a href="#">MKIII</a> 
 
       <ul class="dropdown-menu multi-level"> 
 
       <a href="#">MKIII</a> 
 
       <a href="#">MKIII Roadstar</a> 
 
       <a href="#">MKIII Roadster 20th Anniversary Model</a> 
 
       <a href="#">MKIII-R Edition</a> 
 
       <a href="#">MKIII Slabside</a> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">MKII</a></li> 
 
      <li><a href="#">GT 40</a></li> 
 
      <li><a href="#">Datona coupe</a></li> 
 
      <li><a href="#">Corvette</a></li> 
 
      <li><a href="#">Shelby</a></li> 
 
      <li><a href="#">Caterham</a></li> 
 
     </ul> 
 
    </li> 
 
    </nav>

Answer 1

.navbarから境界線を削除し、それを行う必要があります。

.navbar {ボーダー：0;}

あるいは、少なくとも左右の境界を取り除きます。それらはそれぞれ1ピクセルです。