title: How to make space between menu items in CSS/HTML
body: <p>Problem: Can't make space (at least 1cm) between menu items.</p>
  <p>I'm a beginner, just learning. I know that this question sounds dumb to experienced users.</p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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: red;
    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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
    &lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
    &lt;title&gt;Pagrindinis Puslapis&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;header class="header" id="header"&gt;
    &lt;/header&gt;
    &lt;menu class="header" id="menu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href='#'&gt;Pagrindinis&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#'&gt;Kontaktai&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href='#'&gt;Paslaugos&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/menu&gt;
    &lt;div class="box"&gt;
      &lt;div class="news"&gt;
        &lt;h1&gt;Labas rytas&lt;/h1&gt;
        Štai tokios naujienos
        &lt;div class="part"&gt;
          &lt;h1&gt;RĖMĖJAI&lt;/h1&gt;
          &lt;img src="rem.png" height="100" width="100" &lt;/img&gt;
          &lt;h1&gt;labas&lt;/h1&gt;
          Čia naujienų nėra
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Adding some extra characters to the body of this post to bypass validation...
  Adding some extra characters to the body of this post to bypass validation...</p>