How to remove extra space in navigation bar? [duplicate]


Tags: html,css,html5,css3

Problem :

This question already has an answer here:

Okay I am making a navigation bar and I pretty much did it well but one thing bothers me and that is how to get rid of the little space that lies in between first li and left margin.

HTML:

<div id="nav">
 <ul>
   <li><a href="#">Home</a></li><li>
       <a href="#">Resume</a></li><li>
       <a href="#">Contact</a></li>
 </ul>
</div>

CSS:

#nav {margin:0px;padding:0px;}
#nav ul {list-style-type:none;background: #909909;}
#nav ul li {display: inline-table;padding: 10px;margin: 0px;}
#nav ul li:hover {background-color:#333;}
#nav ul li a {text-decoration: none;font-family:klavika;color: #fff;}

My problem's screen capture :

Navigation Bar

As you can see the space between that first li element and the left margin.



Solution :

Kill the left padding on the ul:

#nav ul {list-style-type:none; background:#909909; padding-left:0;}

    CSS Howto..

    How to remove the margin top from a div with display table-cell?

    How to center text based on only one of two merged cells ? html/css

    How to organize CSS Sheets [closed]

    How to style first paragraph

    of the content differently without using css class , ID or javascript, with IE6 compatibility?

    How can i include label-info from twitter boostrap in my own class definition?

    How can I add specific css id to parent menu with php or javascript

    How do I select text after a

    tag, but before a nested tag?

    How to import a css file only for Firefox but not for other browsers?

    How to Join HTML with CSS in NSString in iOS?

    CSS: how to enforce word wrap on an odd situation?

    how to use namespaces in css?

    how to set shadow for round image(css)

    How to show only the div with id while hiding other divs using CSS only

    How to move a block of content to the right of another block without moving it in the DOM

    How to set css @media print styling with jquery

    angular ngShow with animate.css

    How do I stretch a div to be the height of the document body, not the viewport? (included code)

    how to change properties of a parent div on hover of child div

    How to get MetroUI CSS Datepicker value with javascript

    How do I make a header above my navigation bar?

    How to centre a table in html using css file? [duplicate]

    How to disable a CSS class with javascript on window.load()

    How to make one circle inside of another using CSS

    How to fade-in and fade-out background-image with CSS transition?

    How do I use CSS with a ruby on rails application?

    How to get my .toggleClass() menu to work properly?

    how to make content to be fixed inside scroll div using only css?

    How to create a responsive design with CSS only

    jQuery: How can I set css with own width?

    How to force font-weight on all children, but respect the nested depth