Отображение неупорядоченного списка с фоном цветного поля, чтобы быть посередине

Question

Сейчас я в тяжелой ситуации. Я хочу, чтобы выравнивание неупорядоченного списка было посередине, но не выполнено. Пробовал все средства, но просто не смог его решить. Это как-то в центре, но не в мертвой точке. Я полагал, что что-то не так, как я сделал с полом. Однако мне нужен край 10px (верх & внизу). Полюбите кого-то, кто мог бы мне помочь.

HTML

<div class="lessons"> 
<h1>Video</h1> 
<ul> 
     <a href=""><li> 
      <h2>Video 1</h2> 
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p> 
     </li></a> 
     <a href=""><li> 
      <h2>Video 3</h2> 
      <p>Magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p> 
     </li></a> 
    </ul> 
</div> 

CSS

h1 
{ 
text-align:center; 
} 

.lessons 
{ 
background-color: #e6e7e8; 
width: 100%; 
margin: 0 auto; 
text-align: center; 
padding-bottom:50px; 
} 

ul 
{ 
margin:0 auto; 
width:50%; 
} 

li 
{ 
margin:10px; 
display: inline-block; 
list-style-type: none; 
width:285px; 
height:200px; 
background-color: #fff; 
color:#000; 
-o-transition: all .2s; /* For Safari 3.1 to 6.0 */ 
-ms-transition: all .2s; /* For Safari 3.1 to 6.0 */ 
-webkit-transition: all .2s; /* For Safari 3.1 to 6.0 */ 
transition: all .2s; 
} 

li:hover 
{ 
background-color: #ff7765; 
color:#fff; 
} 

li p 
{ 
padding:15px; 
font-size:90%; 
font-weight: 100; 
} 

JSFiddle: http://jsfiddle.net/rezasan/x58SG/

Answer 1

Fiddle: http://jsfiddle.net/x58SG/1/

Я изменил свой ul CSS для:

ul { 
    margin:0 auto; 
    padding: 0; 
} 

Элемент ul по умолчанию имеет остаточное заполнение, поэтому вы захотите его сбросить. Кроме того, ваш width: 50% был слишком узким для li, поэтому он переполнял его родительский контейнер.

Для дальнейшего использования я считаю, что инструменты разработчика Chrome необходимы для отладки этих проблем. Щелкните правой кнопкой мыши на элементе и выберите «проверить элемент». Когда вы наведите указатель мыши на селектор, хром выделит его на странице, чтобы вы могли видеть ширину, отступы, поля и т. Д.