StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POTwitter Bootstrap - navigaton & media queries - link alignment
text
Body
copied!<p>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:</p> <p><img src="https://i.stack.imgur.com/ciE8e.png" alt="enter image description here"></p> <p>Code:</p> <pre><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; } </code></pre> <p>Now for the mobile version. It looks like this at the moment:</p> <p><img src="https://i.stack.imgur.com/rrNIW.png" alt="enter image description here"></p> <p>Code:</p> <pre><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; } } </code></pre> <p>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 <code>width: 100%</code>, 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.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload