title: CSS Overlapping issues (a and span tags within li)
body: <p>I have the below navigation bar and have added the RESOURCE HUB link and a startburst built in css. I am trying to get the starburst to sit to the left of the text (on the same line) but instead it is overlapping and making the navigation bar look all wonky. I have tried throwing a lot of mud at the wall to see if anything sticks (including making them block-inline elements) but cannot figure it out. I really appreciate any help. Thanks.</p>
  
  <p><strong>Screenshot:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/p0L5E.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p0L5E.png" alt="enter image description here"></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;li class="menuItem text"&gt;
      &lt;span class="starburst"&gt;&lt;span&gt;&lt;span&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;&lt;/span&gt;
      &lt;a href="http://www.verifiedvolunteers.info/" target="vvSite"&gt;
        RESOURCE HUB
      &lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>CSS for starburst:</strong></p>
  
  <pre><code>.starburst {
    display:block;
    width:1.5em;
    height:1.5em;
    background:#fe0;
    -webkit-transform:rotate(-45deg);
    -moz-transform:rotate(-45deg);
    rotation:-45deg;
    position:relative;
    top:2em;
    left:2em;
    text-align:center;
    text-decoration:none;
    color:#000;
    font-weight:bold;
    font-family:Arial, sans-serif;
    text-shadow:0 0 3em #f00, 0 0 4px #f30;
    -moz-transition: -moz-transform 0.3s ease;
    -webkit-transition: -webkit-transform 0.3s ease;
    transition: transform 0.3s ease;
  }
  .starburst span {
    display:block;
    width:1.5em;
    height:1.5em;
    background:#fe0;
    -webkit-transform:rotate(22.5deg);
    -moz-transform:rotate(22.5deg);
    rotation:22.5deg;
  }
  .starburst:hover,
  .starburst:hover span {
    background:#fa0;
    color:#fff;
    text-shadow:0 0 20px #fff, 0 0 8px #fff;
  }
  .starburst:hover {
    -webkit-transform:rotate(315deg);
    -moz-transform:rotate(315deg);
    rotation:315deg;
  }
  </code></pre>
  
  <p><strong>CSS for Resource Hub link:</strong></p>
  
  <pre><code>.mainNav-menu .menuItem.text a {
      color: #9D9D9D;
      display: block;
      padding: 4px 15px;
      text-decoration: none;
  }
  .navbar-default .navbar-nav &gt; li &gt; a {
      color: #777;
  }
  .mainNav-menu .menuItem &gt; a {
      border-top: 1px solid transparent;
      border-bottom: 1px solid transparent;
      border-left: 1px solid #9D9D9D;
      border-right: 1px solid #9D9D9D;
      display: inline-block;
      vertical-align: top;
  }
  .navbar-brand, .navbar-nav &gt; li &gt; a {
      text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
  }
  @media (min-width: 768px)
  .navbar-nav &gt; li &gt; a {
      padding-top: 15px;
      padding-bottom: 15px;
  }
  .navbar-nav &gt; li &gt; a {
      padding-top: 10px;
      padding-bottom: 10px;
      line-height: 20px;
  }
  .nav &gt; li &gt; a {
      position: relative;
      display: block;
      padding: 10px 15px;
  }
  a {
      cursor: pointer;
      cursor: hand;
  }
  </code></pre>
  
  <p><strong>CSS for li:</strong></p>
  
  <pre><code>.mainNav-menu .menuItem {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      display: inline-block;
      font-size: 13px;
      font-weight: bold;
      margin: 0;
      vertical-align: top;
  }
  @media (min-width: 768px)
  .navbar-nav &gt; li {
      float: left;
  }
  .nav &gt; li {
      position: relative;
      display: block;
  }
  * {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  user agent stylesheet
  li {
      display: list-item;
      text-align: -webkit-match-parent;
  }
  </code></pre>
  
  <p><strong>What finally worked thanks to Nomis!:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/xXDU1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xXDU1.png" alt="enter image description here"></a></p>