Cameron Bass Cameron Bass - 5 months ago 24
HTML Question

Navbar not full width - No Bootstrap

I'm intentionally not using Bootstrap. I have a problem that Should be an easy fix but I can't seem to get it right. All I need is my Navbar to fit the top of the browser, right now it stops short of the edges.

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


NAVBAR:

enter image description here

if you look close you can see that the bar doesn't reach the corners of the screen. Any help would be great thank you!

Answer

Just add:

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