Cannot remove default Bootstrap padding in navigation bar - html

Question

I have a Bootstrap navigation bar that is more or less customized. The things is, Bootstrap applies padding-left and padding-right to the <a> elements in the navbar. I tried to override the padding-left on the first <a> element in the navbar (the one that says "Collection") but no success. It actually has to look like the first <a> element is starting at the very beginning of the navbar. I added a photo for easier understanding.
Here is the fiddle: http://jsfiddle.net/jxgkrtsd/8/
Code:
<ul class="nav nav-tabs nav-justified" role="tablist">
<div class="bottom-line"></div>
<li>Kolekcija 24<sup> 7</sup></li>
<li>Izdelki</li>
<li>Zgodba</li>
<li>Mediji</li>
<li>Materiali</li>
</ul>
<div class="bottom-line"></div>
CSS:
#import url("http://fonts.googleapis.com/css?family=Exo:400,500&subset=latin,latin-ext");
body {
font-family: 'Exo', sans-serif;
font-weight: 500;
}
.nav > li > a:hover,
.nav > li > a:focus {
background-color: transparent;
border-color: transparent;
}
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
}
.nav-tabs.nav-justified > li > a {
border-bottom: none;
}
.nav-tabs > li > a:hover {
border-color: none !important;
}
a:hover,
a:focus {
color: black !important;
}
.bottom-line {
height: 1px;
width: 1430px;
background: black;
position: absolute;
}

Answer 1

The problem is not the padding. The problem is that the text is aligned to the center.
Add a text-align: left to your element and things should adjust how you would like them.
This is the code in Bootstrap that is causing the issue
.nav-tabs.nav-justified > li > a {
}
If you alter your jsFiddle you can add it to the following section of CSS:
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
text-align:left !important;
}
Please note the !important after it. This will override the main call and give the desired effect.
Here is the updated jsFiddle example.

Answer 2

I've needed to do this before. After using <nav class="...."> put the rest of the contents in a new div with class="container-fluid". It should look something like this:
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand visible-xs" href="{{ HOME_PATH }}/">{{ site.title }}</a>
</div>
...
Then you can use this to get rid of padding for the links in the navbar or for the brand.
nav .container-fluid{
padding-left:0px;
padding-right:0px;
}
To get rid of padding in the links you can use something like this:
.navbar-nav>li>a{
padding-left:0px;
}

Answer 3

I wanted to change the default navbar bootstrap padding. My intention was to change the bottom padding to 4.5rem. Below code worked for me
.navbar{
padding-bottom: 4.5rem !important;
}

Answer 4

The issue is that the a tags in the navigation are displayed as blocks, instead of the inline. You can change it to display as a flexible block by setting the display to flex, then retain the full block area as the link by setting the width to 100%.
Simply add these to your custom CSS for .nav > li > a to look like:
.nav > li > a {
padding: 10px 5px !important;
margin-right: 0 !important;
color: black;
display: flex;
width: 100%;
}
This will retain the top and bottom padding/margins for blocks, the full width of the block as the link, and remove the left/right padding/margin.
Here's a JSFiddle showing it: http://jsfiddle.net/9kzfaypp/

Answer 5

I agree with a few other answers here like #dippas, but to get the text flush to the left, as your picture shows you need to override the anchor padding as well:
.nav-tabs.nav-justified > li > a {
text-align:left;
padding-left:0px !important;
padding-right:0px !important;
}
http://jsfiddle.net/jxgkrtsd/10/