Displaying Unordered list with div background coloured box to be in the middle

Question

I'm in a tight situation now. I want to align the unordered list box to be in the middle but failed. Tried all means but just didn't manage to solve it. It's somehow in the centre region but not dead center. I believed there's something wrong I did to the margin. I need a margin of 10px however (top & bottom). Really appreciate someone who could help me.

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/

I changed your ul CSS to:

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

The ul element defaults to having left-padding, so you'll want to reset that. In addition, your width: 50% was too narrow for the li, so it was overflowing its parent container.

For future reference, I find Chrome's developer tools to be essential when debugging these sorts of problems. Right click on the element and select "inspect element". When you hover your mouse over the selector, chrome will highlight it on the page so you can see width, padding, margins, etc.