After creating an html page with Twitter Bootstrap, I have included the code and a screenshot of the resulting page below.
<div class="container">
<header class="row">
<a class="span2" href="/"><img src="./logo.png" alt="Whitesquare logo"></a>
<div class="span2 offset6" id="reminders">Reminders</div>
<div class="span2" id="administration">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">Statistics</li>
<li class="span2" id="LPU">LPU</li>
<li class="span2" id="content">Content</li>
<li class="span2" id="add">Add</li>
<li class="span2" id="addParticipant">Participant</li>
<li class="span2" id="addLPU">LPU</li>
<li class="span2" id="addAdmin">Administrator</li>
</ul>
</div>
</div>
<div id="mainContent" class="span9">
</div>
</div>
</div>
In order to modify the positioning of the navbar <li> elements to align closer to the left border of the div, I have experimented with different CSS solutions such as:
ul
{
list-style:none;
padding-left:0px;
margin-left: 0px;
background-color: red;
}
Despite my attempts, none of these solutions have proven successful so far. Does anyone have any suggestions?