title: Adjusting navigation bar text - CSS
body: <p>I'm having this current problem and I'm a bit confused. I would appreciate some help.</p>
  
  <p>My current navigation bar looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/TL9Gr.png" alt=""></p>
  
  <p>I would like it to be like this:</p>
  
  <p><img src="https://i.stack.imgur.com/8e4dc.png" alt=""></p>
  
  <p>Here is the relevant CSS code:</p>
  
  <pre><code>nav ul {
      list-style: none;
      margin: 0 auto;
      padding: 20px 0 0 0;
      border-top: 1px solid #333;
      width: 100% auto;
  }
  nav li {
      list-style-type: none;
      display: inline;
      ;
  }
  .first {
      display:inline;
      margin: 0 auto;
      padding: 0 auto;
  }
  @font-face {
      font-family:"Steelfish Rg";
      src: url(../fonts/steelfish_rg.ttf) format('truetype');
  }
  nav a {
      text-transform: uppercase;
      padding: 0 10px;
      font-family: Steelfish Rg, Helvetica, "Helvetica Neue", Arial, sans-serif;
      font-size: 50px;
      line-height: 51px;
      height: 78px auto;
      color: white;
      text-decoration: none;
      color: #ffffff;
      border-right: 1px solid #333;
      border-height: 20px;
      position: relative;
      width: 100% auto;
  }
  @font-face {
      font-family:"Clarendon Lt BT";
      src: url(../fonts/20924071.ttf) format('truetype');
  }
  nav small {
      font-family: Clarendon Lt BT;
      font-size: 13px;
      line-height: 17px;
      color: #ababaa;
      text align: left;
      font-weight: 700;
  }
  nav .bottom {
      margin-top:0;
      margin-bottom: -11px;
      text-align: right;
      padding: 0px 5px 0px 10px;
      position: absolute;
      bottom: 0;
      right: 19px;
  }
  </code></pre>
  
  <p>as well as a part of the html for the navigation:</p>
  
  <pre><code>&lt;nav class="navigation"&gt;
      &lt;ul&gt;
          &lt;li&gt; 
              &lt;a href="/eng/" class="first current"&gt;
                  &lt;small&gt; get &lt;/small&gt;
                  &lt;span&gt; home &lt;/span&gt;
                  &lt;small class="bottom"&gt;dude&lt;/small&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/isherwood/74Lcfdz2/" rel="nofollow noreferrer">Fiddle</a></strong></p>
  
  <p>I would appreciate the help, thanks!</p>