How to make space between menu items in CSS/HTML


Tags: html,css

Problem :

Problem: Can't make space (atleast 1cm) between menu items.

Here is jsfiddle: http://jsfiddle.net/L6q4uL8p/

I'm a beginner, just learning. I know that this question sounds dumb to experienced users.

Here is the CSS:

body {
    height:auto;
    width:auto;
    background-image: url("img/top.png");
}

.header {
    margin:0px auto;
    max-width: 960px;
}

#header {
    height:300px;
    width:960px;
    background-image:url("img/top.png")
}
#menu ul {
    margin:0px auto;
    margin-left:-20px; /*pull towards left*/
    margin-right:20px; /*push towards right*/
    list-style: none;
    background:#3d3d5c;
}

#menu li {
    display: inline-block;
}

#menu li a  {
    margin-left:-40px;
    color:#fff; 
    text-decoration:none; 
    display:block; 
    background:url(img/manu.png); 
    padding:0 10px 0 10px;  
    height:54px; 
    width:130px;
    line-height:54px;
}

#menu li a:hover {
    color:#fff; 
    text-decoration: none; 
    background:url(img/manu1.png);  
    height:54px; 
    width:130px;
    line-height:54px;
}

.box {
    margin:0px auto;
    width:960px;
    background-color:ghostwhite;
    height:700px;
    max-height:2200px;
}

.news {
margin:0px auto;
margin-left:20px;
margin-top:20px;
display:inline-block;
background-image:url('img/bgr.png');
background-size:960px,500px;
width:670px;
height:500px;
max-height:2000px;
    }
.news h1 {
    background-image:url('img/news.png');
    font-style:normal;
    font-size:30px;
    color:white;
    width:670px;
    height:38px;
}

.part {
margin:0px auto;
margin-left:700px;
margin-top:-95px;
background-image:url('img/bgr.png');
background-size:cover;
width:240px;
height:300px;
max-height:2000px;
    }
.part h1 {
    background-image:url('img/side.png');
    font-style:normal;
    font-size:30px;
    color:white;
    width:240px;
    height:38px;

}


Solution :

you can add margin-right value to the #menu li or #menu li a JS Fiddle

#menu li {
    display: inline-block;
    margin-right:50px;
}

    CSS Howto..

    How to add image, that overlapping Bootstrap modal?

    How to identify is a blog post has been selected or not?

    How to combine multiple css framework with overpalling classes

    How can I set the CSS class of an element in a Rails view?

    How to wrap content around an image with CSS?

    How to simulate \hfill with HTML and CSS?

    How to add more items to the list without going to the next row? [closed]

    How to change the Img tag src through css only? [closed]

    Chrome and Firefox render positioned layout with negative margin differently - how to prevent?

    How to prevent CSS declaration dropped errors cross browser?

    How to achieve MS word tab function in html/ css?

    How to override inline css through javascript?

    CSS/HTML menu not showing correctly

    How to get image url in css inside a public folder in Rails?

    How can a html table highlight columns by changing the border on hover?

    How can I remove a text appearing in quotes after tag using CSS? [duplicate]

    How to add a margin to a paragraph?

    show/hide multiple text field based on radio selection html javascript

    How to achieve multiple icon hover transitions over one image

    CSS: how to remove the indent of list items shown in Firefox

    how to define css to get the simple tabbed menu

    How To Use CSS To Add Multiple Fonts In One Paragraph And How To Add Multiple CSS Properties To One CSS Id?

    How to set table column widths to the longest value, excluding header

    how to apply ellipse effect in which contain space in string?

    How to change style of a table in a chrome extension?

    How to add a class to an element with CSS

    How to select a range of elements in repeated pattern

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    How do I take code from Codepen, and use it locally?

    How to convert SVG CSS animation to pure JS code