Список перетекает в HTML

Question

Я ВГ создал горизонтальное меню и вертикальное меню, в обеих случаях я заметил, что элементы не отображаются должным образом, горизонтальное меню слишком велико:

<ul class="menu-horizontal"> 
<li>Home</li> 
<li>About Us</li> 
<li>Recent Articles</li> 
<li>Email</li> 
<li>Resources</li> 
<li>Links</li> 
</ul> 

.menu-horizontal 
{ 
background:blue; 
width:926px; 
height:30px; 
overflow:hidden; 
list-style: none; 

}

.menu-horizontal li 
{ 
display:inline-block; 
text-align:center; 
font-weight:bold; 
padding:7px 45px; 
color:white; 
font-size:14px; 
border-right:1px solid black; 

}

Я плавал список справа, в этом случае я обнаружил, что вертикальное меню не доходит до его левой границы:

.menu-vertical 
{ 
list-style:none; 
float:right; 
border:1px solid black; 
width:200px; 
height:auto; 
margin-left:10px; 
} 

.menu-vertical li 
{ 
padding-top:10px; 
font-weight:4; 
font-size:1.25em; 
text-align: center; 
text-decoration: underline; 
color:blue; 
background-color: #bfbbc9; 
} 

<ul class="menu-vertical group"> 
<li>Lorem</li> 
<li>ipsum</li> 
<li>dolor</li> 
<li> sit amet</li> 
<li> consectetur</li> 
<li> adipiscing</li> 
<li> elit</li> 
</ul> 

Весь HTML и CSS находится в fiddle.

Answer 1

Обязательно удалите или переопределите настройки браузера, такие как заполнение. Например.

.menu-horizontal {padding: 0; margin: 0;}