CSS - want to remove a blank space but have no idea how to get rid of it?

Tags: html,html5,css3,css-float

Problem :

OK so here is my code, I don't understand why the first blank space is appearing to the left hand side of the page.

CSS

.header-left ol{
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;      
}

.header-left li{
    list-style:none;
float:left;
}

.header-left a {
    color:#000;
    display:block;
    height: 50px;
    text-align:center;
    vertical-align:middle;
    text-decoration:none;               
    min-width: 100px;
    overflow: auto;
    border-radius: 20px;
}

.header-left a:hover {
    color:#000000;
    text-decoration:none;
}

#nav1 a:hover { background-color: #FF5B0D; }    

#nav2  a:hover {    background-color:#00FF40;}

#nav3  a:hover {    background-color:#FF0080;}

#nav4  a:hover {    background-color:#00CCFF;}

#nav5  a:hover { background-color: #FFFF00; }

HTML

<div class="header-left">
  <ol>
    <li id="nav1"><a href="http://www.google.com">a</a></li>
    <li id="nav2"><a href="http://www.google.com">b</a></li>
    <li id="nav3"><a href="http://www.google.com">c</a></li>
    <li id="nav4"><a href="http://www.google.com">d</a></li> 
    <li id="nav5"><a href="http://www.google.com">e</a></li>
  </ol>
</div>

---

Solution :

You need to reset the natural padding and margin of the body and ol. Set:

body{
    margin: 0;
    padding: 0;
}

.header-left ol{
    width: auto;
    float: left;
    display: block;
    background-color: #6899D3;        
    margin: 0; //RESET DEFAULT
    padding: 0; // RESET DEFAULT
}