I'm facing a challenge at the moment. I've been trying to center the unordered list box, but all my attempts have been unsuccessful. It seems to be in the middle, but not perfectly centered. I suspect there's an issue with the margins. I need a 10px margin top and bottom. Any help would be greatly appreciated.
HTML
<div class="lessons">
<h1>Video</h1>
<ul>
<a href=""><li>
<h2>Video 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li></a>
<a href=""><li>
<h2>Video 3</h2>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</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;
-ms-transition: all .2s;
-webkit-transition: all .2s;
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/