2016-06-23 10 views
0

私は意図的にBootstrapを使用していません。私は簡単な修正でなければならない問題がありますが、それを正しく理解することはできません。私が必要とするのはNavbarをブラウザの上部に合わせることです。今は、Navbarの端が止まってしまいます。Navbar not full width - No Bootstrap

VIEW:

<div class="nav"> 
    <ul> 
    <li><%= link_to 'Subscribers', subscribers_path %></li> 
    <li><%= link_to 'Sign Up', new_subscriber_path %></li> 
    <li><%= link_to 'Check In', subscribers_search_path %></li> 
    </ul> 
</div> 

CSS:

.nav { 
    width: 100%; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
} 

li { 
    float: left; 
    border-right:1px solid #bbb; 
} 

li:last-child { 
    border-right: none; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 

ナビゲーションバー:

enter image description here

あなたが近くに見える場合は、バーがのコーナーに到達していないことがわかりますスクリーン。どんな助けもありがとう!

+1

body要素は、通常、デフォルトのパディング値を持っています。 –

答えて

4

ちょうど追加:

body{ 
    margin:0px; 
    padding:0px; 
}