I've made an html page with twitter bootstrap and here it's code and screenshot of result page.

<div class="container">
    <header class="row">
        <a class="span2" href="/"><img src="./logo.png" alt="Whitesquare logo"></a>
        <div class="span2 offset6" id="reminders">Напоминания</div>
        <div class="span2" id="administration">Администрация</div>
    </header>
    <div class="row">
        <div class="navbar span2">
            <div class="navbar-inner">
            <ul class="nav nav-pills nav-stacked">
                <li class="active span2" id="statistics">Статистика</li>
                <li class="span2" id="LPU">ЛПУ</li> 
                <li class="span2" id="content">Состав</li>
                <li class="span2" id="add">Добавить</li>
                <li class="span2" id="addParticipant">Участника</li>
                <li class="span2" id="addLPU">ЛПУ</li>
                <li class="span2" id="addAdmin">Администратора</li>
            </ul>
            </div>
        </div>
        <div id="mainContent" class="span9">
        </div>
    </div>
</div>

I want a navbar <li> elements to be closer to left border of div. I've been trying different css solutions like:

ul
{
    list-style:none;
    padding-left:0px;
    margin-left: 0px;
    background-color: red;
}

But nothing has helped me yet. Any suggestions?

I've made an html page with twitter bootstrap and here it's code and screenshot of result page.

<div class="container">
    <header class="row">
        <a class="span2" href="/"><img src="./logo.png" alt="Whitesquare logo"></a>
        <div class="span2 offset6" id="reminders">Напоминания</div>
        <div class="span2" id="administration">Администрация</div>
    </header>
    <div class="row">
        <div class="navbar span2">
            <div class="navbar-inner">
            <ul class="nav nav-pills nav-stacked">
                <li class="active span2" id="statistics">Статистика</li>
                <li class="span2" id="LPU">ЛПУ</li> 
                <li class="span2" id="content">Состав</li>
                <li class="span2" id="add">Добавить</li>
                <li class="span2" id="addParticipant">Участника</li>
                <li class="span2" id="addLPU">ЛПУ</li>
                <li class="span2" id="addAdmin">Администратора</li>
            </ul>
            </div>
        </div>
        <div id="mainContent" class="span9">
        </div>
    </div>
</div>

I want a navbar <li> elements to be closer to left border of div. I've been trying different css solutions like:

ul
{
    list-style:none;
    padding-left:0px;
    margin-left: 0px;
    background-color: red;
}

But nothing has helped me yet. Any suggestions?

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Can't you use firebug or developer tools? Try to manipulate CSS – Satpal Commented Apr 22, 2014 at 13:12
• They align correctly on jsfiddle, do you have a live demo? – Godinall Commented Apr 22, 2014 at 13:15
• post a plnkr. it gives out bootstrap default, so we can try – Yagiz Ozturk Commented Apr 22, 2014 at 13:17
• works fine here jsfiddle/vishnurajv/9RMTp/2 – Vishnuraj V Commented Apr 22, 2014 at 13:29
• Have you tried adding a negative left margin? Apply it to the applicable class(s) .navbar { margin-left: -20px; } – DivineChef Commented Apr 22, 2014 at 15:26

1 Answer 1

Try something along these lines:

ul.nav,
ul.nav li {
    margin-left: 0;
    padding-left: 0;
}

It may be the list items and not the list that is padded.