html - 1st li item (tile) not aligned properly -

html - 1st li item (tile) not aligned properly -

i'm having problem aligning li elements. aligns nicely 1st element not align properly. also, there weird black dots around 1st row (which wasn't there before added ul tag). how align first li properly? code problematic (first) li:

<li> <div class="col-md-6"> <div class="tile blue" id="tile1"> <div align="center"> <h3 class="title">network security</h3> </div> <br> <div class="row"> <div align="center"> <a href="#" class="icon-white"> <i class="fa icon-white fa-users fa-lg "> </i> 10 </a> </div> </div> <br> <div class="row"> <div class="text-center"> <div class="btn-toolbar" id="btns"> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-wrench"></span> manage</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-eye-open"></span> preview</button> <button class="btn btn-default btn-danger"><span class="glyphicon glyphicon-pencil"></span> edit info</button> </div> </div> </div> </div> </div> </li>

check out fiddle created visualization of problem: http://jsfiddle.net/ae3vv/1/

update bullets causing problem. due that, 1st tile not aligned tile on right. removing dot solved problem [ li{list-style:none;} ]

the first tile looks me, remove dots use:

.list-group { list-style:none; }

html css