title: how to create equal spaces in the navigation bar?
body: <p>i want to make my navigation bar look like this <a href="http://www.templatemonster.com/demo/51347.html" rel="nofollow">http://www.templatemonster.com/demo/51347.html</a></p>
  
  <p><a href="http://i.stack.imgur.com/GKAXv.png" rel="nofollow">what i achieved is this</a></p>
  
  <p>please while correcting the code , do state the reason behind it. it will of great help. thanks</p>
  
  <p>also the social networking icons shown are in black and the hover effect gives it a red color. is it an image or that can be achieved solely with help of css ?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background:gray;
    /*border: 2px solid yellow;*/
  }
  
  .headwrap {
    width: 93%;
    height: auto;
    margin: auto;
    padding-top: 70px;
  }
  
  .logo {
    margin: 0;
    float: left;
  }
  
  .socialbuttons {
    float: right;
  }
  
  .socialbuttons ul {
    list-style: none;
    float: right;
  }
  
  .socialbuttons ul li {
    display: inline;
    padding-left: 20px;
  }
  
  .navbar {
    margin-top: 40px;
    width: 100%;
    background: #db3636;
    float: left;
  }
  
  .navbar ul {
    list-style: none;
    margin: 0;
    float: left;
    padding: 30px 15px;
  }
  
  .navbar ul li {
    display: inline;
    padding: 15px;
    border-right: 2px solid black;
    color: white;
    font-weight: bold;
    font-family: sans-serif;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Industrial Website demo&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial scale=1.0"&gt;
    &lt;link href="damion.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;header class="headwrap"&gt;
      &lt;div class="logo"&gt;
        &lt;img src="logo.png" alt="Damion max"&gt;
      &lt;/div&gt;
      &lt;div class="socialbuttons"&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;img src="facebook.png"&lt;/li&gt;
          &lt;li&gt;&lt;img src="twitter.png"&lt;/li&gt;
          &lt;li&gt;&lt;img src="feed.png"&lt;/li&gt;
          &lt;li&gt;&lt;img src="google.png"&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;nav class="navbar"&gt;
        &lt;ul&gt;
          &lt;li&gt;ABOUT US&lt;/li&gt;
          &lt;li&gt;GALLERY&lt;/li&gt;
       &lt;li&gt;EVENTS&lt;/li&gt;
          &lt;li&gt;BLOG&lt;/li&gt;
          &lt;li&gt;CONTACTS&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
    &lt;/header&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>