Question

I am having some problems with the alignment of the links inside the navbar for the mobile version of my site. When looking at the desktop version, everything is ok. It looks like this:

Code:

.navbar {
    margin-top: 30px;
    min-height: 50px;
    padding: 0;
    background-color: red;
    background-image: none;
    filter: -;
    border: none;
    -webkit-border-radius: none;
    -moz-border-radius: none;
    border-radius: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    *zoom: 1;
}

.navbar-inner {
    background-color: fuchsia;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.navbar li a,
.navbar .nav > li > a:hover {
    margin-left: 20px;
    background-color: #5593f8;
    webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

Now for the mobile version. It looks like this at the moment:

Code:

@media (max-width: 767px) {
    body {
      padding-right: 0;
      padding-left: 0;
    }
    .navbar {
        margin-top: 0px;
    }
    .navbar .nav > li {
        float: none;
        text-align: center;
    }
    .navbar li a,
    .navbar .nav > li > a:hover {
        margin: 0;
    }    
    .navbar .nav {
        width: 100%;
        background: red;
    }
    .navbar-inner {
        padding: 0;
        margin: 0;
    }
}

Do you see that small gap on the left where the fuchsia can be seen? I don’t want that. I want the links to be width: 100%, but somehow that’s not possible. I spend nearly the whole day to figure out what the problem is, but I can’t wrap my head around it. Its not margin, its not padding, but what is it? Please help me.

Answer 1

Ok, I got it!

After the media query posted above, I had this:

@media (max-width: 979px) {
       .navbar {
           margin-top: 0px;
       }
       .navbar-inner {
           padding-left: 5px;
        }
   }

The 5px declared in the last rule are gap you see in the post above. Moving the rule from this post above the rule from the first post did solve the problem.