CSS Menu has odd left margin

Question

I have this CSS code for a horizontal menu:

.vertical-nav {
    height:auto;
    list-style:none;
    width: 100%; /******* MODIFIED ********/
    margin-top         


        

Answer 1

Actually it isn't margin.

Web browsers apply a padding-left on HTML list elements such as

(Google Chrome set -webkit-padding-start: 40px;).

You could override the user agent stylesheet by setting padding: 0; on

element:

.vertical-nav {
    padding: 0;
}

Here is the JSFiddle Demo

Note: There's also a margin: 8px; applied on element by web browsers, you could reset the margin by:

body {
    margin: 0;
}

---

What is the best practice?

Different browsers may have different behavior. they apply several CSS declaration on HTML elements by default. they adds margin, padding, text-decoration and so on.

To get rid of this, most web developers use some CSS declarations called CSS Reset to override the browser's default stylesheet, as a start point.

Take a look at Legendary Eric Meyer's CSS Reset.