Cameron Bass Cameron Bass - 2 years ago 144
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.


<div class="nav">
<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>


.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

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 Source

Just add:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download