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
}

    CSS Howto..

    How can I create custom tooltips with css pseudoelements

    How to add a background color to HTML option?

    How to create a image transition hover effect with css without breaking the grid layout

    How to get actual (not original) height of a CSS-rotated element

    How can I include the CSS file in CodeIgniter?

    How to keep images locked at specific height within Bootstrap container

    How can I push the primefaces DefaultMenuModel before an accordion panel?

    ExtJS how to remove grid row underline when selected and over

    How to style 404 page in WAMP server

    How to rotate image when scrolling using CSS transform?

    facebook and css, how to place a like comment dialog on top of a video?

    How do I solve this IE7 margin issue?

    How can I use CSS to show and hide multiple elements at once?

    How to set all CSS values to their default? [duplicate]

    How do I use Parent page to get attributes for wp_nav_menu buttons?

    How to render css code from php var without page refresh?

    How to use inline CSS by th:style using “The ? : operator” in ThymeLeaf

    How do I use CSS to control which part of an image shows in mobile version of site?

    How to let DOM elements stack and overflow horizontally instead of vertically in HTML?

    How to hide DIV when scroll reach at Bottom through CSS?

    How to increase Page Width with the Help of CSS?

    How does one creates inner and outer triangles on a div with pure CSS?

    How to include SASS files and CSS files into version repository and developement cycle

    Uncaught SyntaxError: Unexpected token . AKA how to check for an Id in jQuery [closed]

    How to add style/css to a simple jQuery accordion?

    How to apply a responsive CSS height to an element using min/max-height and height?

    How to create an interactive image with HTML5, Javascript, DOM and CSS

    How do you mimic multi row horizontal scroll table behavior with CSS and Divs?

    How change css using variables to make an animation

    [HTML][CSS] How to change opacity of background-image but not the text on it?