Navbar не полная ширина - нет Bootstrap

Question

Я намеренно не использую Bootstrap. У меня есть проблема, которая должна быть легким решением, но я не могу понять, что это правильно. Все, что мне нужно - это мой Navbar, чтобы он соответствовал верхней части браузера, сейчас он останавливается за пределами краев.

ВИД:

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

NavBar:

, если вы посмотрите близко вы можете увидеть, что бар не достигает углов экран. Любая помощь будет большой спасибо!

Answer 1

Просто добавьте:

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