Ярлыки не выстроились в левой части div

Question

У меня есть несколько переключателей, которые скрыты и закрыты ярлыком с фоновым изображением. Моя проблема заключается в том, что метки не выравниваются в левой части div, а вместо этого выстраиваются где-то ближе к середине. Я часами пробираюсь к нему и не могу понять. Мой сайт можно увидеть здесь: http://envisionhomedesign.com/derek/test12/index.html

CSS:

.button { 
visibility:hidden; 
clip:rect(0 0 0 0); 
position: absolute; 
} 
label { 
background-image: url("Images/Blue Button.png"); 
background-size: 130px; 
background-repeat: no-repeat; 
width: 130px; 
height: 30px; 
display: block; 
float: left; 
margin-right: 50px; 
text-align:center; 
font-size:small; 
font-weight: 700; 
padding-top:7px; 
font-family: 'Lucida Sans Unicode, Lucida Grade, sans-serif'; 
} 

.button:checked + label { 
background-image: url("Images/Clicked Button.png");} 
input[type=button] { 
font-family: 'ubuntu', sans-serif; 
width: 130px; 
height:30px; 
background:transparent; 
float:none;} 

HTML:

<div id="leftcolumn"> 
<div id="buttonDeadspace"></div> 
<form action="#"> 
<ul> 
<li> 
<input type="radio" class="button" name="buttonGroup" onclick="Roof_Stylei_HipGroup();" id="button0a" checked/> 
<label for="button0a">Roof Style: Hip</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonGroup" onclick="Roof_Stylei_GableGroup();" id="button0b" /> 
<label for="button0b">Roof Style: Gable</label> 
</li> 
</ul> 
</form> 
<div id="buttonGuide0">Click above to begin</div> 
<div id="groups0" style="visibility:hidden"> 
<form action="#"> 
<ul> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Board_n_Batten();" id="button01" checked/> 
<label for="button01" onmouseover="mouseOver('Board_n_BattenMouseover');" onmouseout="mouseOff('Board_n_BattenMouseover');">Board & Batten</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Door();" id="button02" /> 
<label for="button02" onmouseover="mouseOver('DoorMouseover');" onmouseout="mouseOff('DoorMouseover');">Door</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Garrage_Door();" id="button03" /> 
<label for="button03" onmouseover="mouseOver('Garrage_DoorMouseover');" onmouseout="mouseOff('Garrage_DoorMouseover');">Garrage Door</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Roof();" id="button04" /> 
<label for="button04" onmouseover="mouseOver('RoofMouseover');" onmouseout="mouseOff('RoofMouseover');">Roof</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Shake();" id="button05" /> 
<label for="button05" onmouseover="mouseOver('ShakeMouseover');" onmouseout="mouseOff('ShakeMouseover');">Shake</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Siding();" id="button06" /> 
<label for="button06" onmouseover="mouseOver('SidingMouseover');" onmouseout="mouseOff('SidingMouseover');">Siding</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Stone();" id="button07" /> 
<label for="button07" onmouseover="mouseOver('StoneMouseover');" onmouseout="mouseOff('StoneMouseover');">Stone</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Trim();" id="button08" /> 
<label for="button08" onmouseover="mouseOver('TrimMouseover');" onmouseout="mouseOff('TrimMouseover');">Trim</label> 
</li> 
<li> 
<input type="radio" class="button" name="buttonSubGroup" onclick="Window();" id="button09" /> 
<label for="button09" onmouseover="mouseOver('WindowMouseover');" onmouseout="mouseOff('WindowMouseover');">Window</label> 
</li> 
</ul> 
</form> 
</div> 
<div id="buttonDeadspace"></div> 
</div> 

Answer 1

Большинство браузеров добавить отступы и поля для ul элементов. Этот стиль заставляет ваш контент в левом столбце перемещаться и переполняться. Вы можете явно указать это дополнение/маржа для переопределения особенностей браузера.

ul { padding:0; margin:0; } 

Answer 2

Изменение:

text-align:center; 

To:

text-align:left; 

В ярлыке {}

также добавить новый класс:

label { float:left}