title: how to remove the white space between two span tags?
body: <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>    .side-bar{
          background-color: red; 
      }
      @media (min-width: 768px){
          .side-bar{
              z-index:10;
              position:absalute;
              width:220px;
              /*padding-top:60px;*/
              height:100%;
              /*top:0;*/
              position:fixed;
  
      }
      }
      @media (min-width: 768px){
          .top-left-part{
              width:220px;
              position:fixed;
              z-index: 11;
              /*top: 0;*/
              height: 60px;
          }
      }
      /*---------------top left part starts here------------*/
      .top-left-part{
          width:220px;
          float:left;
          background-color: #ffffff;
          /*padding-top: 60px;*/
      }
      .top-left-image{
          float: left;
          height: 40px;
          width: 50px;
          padding-left: 1.3px;
          padding-right: 10px;
          padding-top: 2.7px;
      }
      .left-top-text{
          display: inline-block;
          padding-top:6px;
          font-size: 30px;
          white-space: nowrap;
         /* word-spacing: -1px;
         /* float: right;*/
          /*margin-left: 10px;*/
      }
      .text-elite{
          font-weight: 600;
      }
      .text-admin{
          padding-left: -5px;
      }
      /*---------------top left part ends here-------------*/
      /*---------------top-right part starts here----------*/
      .top-right-part{
          top: 0 !important;
          background-color:#4F5467;
          width:100%;
          height:60px;
          right: 0;
      }
      .arrow-left{
          color: white;
      }
      /*---------------top right part ends here-------------*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
      &lt;head&gt;
                &lt;meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" /&gt;
                &lt;link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" /&gt;
                &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
                &lt;link rel="stylesheet" type="text/css" href="font-awesome-4.2.0/css/font-awesome.min.css" /&gt;
                &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;link rel="stylesheet" href="css/elite.css" type="text/css"&gt;
          &lt;script src="js/elite.js"&gt;
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="top-bar"&gt;
              &lt;div class="top-left-part"&gt;
                  &lt;span &gt;&lt;img src="img/elite-icon.jpg" class="top-left-image"&gt; &lt;/span&gt;
                  &lt;span class="left-top-text text-elite"&gt;elite &lt;/span&gt;
                  &lt;span class="left-top-text text-admin"&gt;admin&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="top-right-part"&gt;
                  &lt;span class="arrow-left fa-arrow-left"&gt; &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="bottom-part"&gt;
              &lt;div id="left-side-bar" class="side-bar"&gt;
  
              &lt;/div&gt;
              &lt;div id="right-side-container"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>on above code I have two span tag elements: elite and admin. I want to remove space between them. I tried to put negative value for padding property of second span element, but it's not working. how can I fix this? </p>