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 position div so that it renders outside container

    Want to override Bootstrap, but how to avoid the use of !important?

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    How i can make it wiht css3?

    How to change a css element based on other element

    How to get the textarea to be same height as row

    How to use CSS spinner in Angular2 while loading asynchronous list?

    How to display a div at the center of viewport?

    How to get chevron to align to center of link tab

    How to pivot image with CSS and Javascript

    How to override GWT obfuscated style for DataGrid header

    How to access parent element in CSS? [duplicate]

    How to register Css of html page in wordpress theme

    how to show product info after image in bigger zoom levels

    How to use CSS first-child but excluding text content

    How can i apply more than 1 style to a single node at the same time programmatically

    How to set the jquery draggable with margin left?

    make a div fold out to show content

    How can I add flashing effect to an option tag?

    How do I remove white space due to position relative of CSS?

    How do I blur an element with scroll, until it's blurred to a certain point?

    How can I keep the original :focus element with CSS?

    How to make a curved edge hexagon by using CSS

    How to make Zig Zag borders using CSS? [closed]

    HTML: How to add an image using CSS as linked style sheet

    How to make a CSS table with use of DIV UL LI

    WordPress: How to style Title and Excerpt in Display Post Shortcode Plugin

    how to make a custom scroll bar with css

    How do I get this HTML canvas animation to appear on top of my image?

    How to use one icon from different image files?