title: Spacing Nav Menu
body: <p>I have a problem resizing or spacing a navigation menu as seen on the pic below. If any body knows how, please inform me. I just wanna resize nav menu box so the first one become like the second one (to resize it smaller).</p>
  
  <p><img src="https://i.stack.imgur.com/buHAJ.jpg" alt="enter image description here"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!--MENU--&gt;
      &lt;nav id = "main-nav-menu"&gt;
        &lt;ul class="sf-menu"&gt;
          &lt;li class="active"&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;
  
          &lt;li&gt;&lt;a href="about-us.html"&gt;ABOUT US&lt;/a&gt; 
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="services.html"&gt;SERVICES&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="products.html"&gt;OUR PRODUCTS&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="equipments.html"&gt;OUR EQUIPMENTS&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="machine_list.html"&gt;MACHINE LIST&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="contact.html"&gt;CONTACT&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;!-- end menu --&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#header .menu select {
  border: 1px solid #CCCCCC;
  display: block;
  left: 4px;
  position: relative;
  top: 205px;
  width: 250px;
  }
  
  
  #header .menu select {
  display: block;
  width: 200px;
  }
  </code></pre>