title: Position text under each other and stretch
body: <p>Here is my CSS code;</p>
  
  <pre><code>#nav a {
    display:block;
    background: #1a1a1a; 
    color: #fff; 
    text-decoration: none;
    padding: 20px;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    text-shadow: 0 -1px 0 #000;
    width: 100%;
    height: 100%;
    position: static;
    float:left;
  
    }
  </code></pre>
  
  <p>Here is the problem:</p>
  
  <p><a href="https://i.stack.imgur.com/IE72M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IE72M.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to make each item have it's own line (on the image you can see re-tweets and likes are on the same line), when they should be on a separate line. Also, as you can see by looking at the re-tweets and likes background, it doesn't stretch to the red border because the text isn't long enough. How would I make the background stretch to the border width? Here is more code used for this section;</p>
  
  <pre><code>  /* submenu positioning*/
    #nav ul {
    position: absolute;
    z-index: 1;
    left: -99999em;
    width: auto;
    height: auto;
    border: 1px solid #A81E1E;
  
  }
  </code></pre>
  
  <p>Another example of the background not stretching:</p>
  
  <p><a href="https://i.stack.imgur.com/0zBg4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0zBg4.png" alt="enter image description here"></a></p>