Difficulty aligning HTML header elements

Question

I am trying to add a Twitter logo to my header (I use Bootstrap CSS) but it's screwing up the alignment. I was trying to put them side by side, but instead it shoved them beneath. Here was my first attempt:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand csh-top-link" href="index.html">Cardshifter</a>

    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
          <li><img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;"><a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.2em; margin-top: 2px;">@Cardshifter</a></li>
      </ul>
    </div><!--/.nav-collapse -->
</nav>

This is how it renders:

This was my second attempt using <div> instead of <ul>:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand csh-top-link" href="index.html">Cardshifter</a>          
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <div class="nav navbar-nav">
        <img src="images/logos/Twitter_logo_blue.png" style="height: 1.5%; width: 1.5%;">
      </div>
      <div>
        <a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.2em; margin-top: 2px;">@Cardshifter</a></li>
      </div>
    </div><!--/.nav-collapse -->
</nav>

That seems like a slight improvement, as in they are separate elements (note the light blue contour on the right only appears in my Brackets live preview, not on the actual rendition):

I have tinkered around with CSS margin and padding on both the <ul> and <div> versions with no apparent improvement. If you wish to see the code in context, it is currently hosted on Github until a solution is found. The desired layout is side by side:

[Cardshifter] | [Twitter logo] | [@Cardshifter]

Answer 1

You can do simple alignment of list-items with a … list!

HTML:

<ul class="navbar">
    <li>
        Twitter logo here
    </li>
    <li>
        Twitter handle here
    </li>
</ul>

CSS:

.navbar {
    /* Just a little housekeeping … */
    list-style: none;
    margin: 0;
}

.navbar > li {
    display: inline-block;
}

Answer 2

@kleinfreund got the correct solution, however a bug was pointed out as a comment to the question, which (combined with the accepted answer) completely fix the problem:

correct answer is below, also what up with the percentage inline widths on the image? That's a whole lotta bad going on there. Dump the inline styles, don't use percentages for widths on a bitmap image, use the exact pixel size and use the HTML height and width attributes. – Matt Lambert 3 hours ago

So I changed the code to this and it work completely:

    <div id="navbar" class="collapse navbar-collapse">
      <ul class="csh-twitter nav navbar-nav">
          <li>
              <img src="images/logos/Twitter_logo_blue.png" style="height: 25px; width: 30px; margin-top: 10px;">
          </li>
          <li>
              <a href="https://twitter.com/Cardshifter" class="navbar-brand csh-top-link" style="font-size: 1.4em; margin-top: 2px;">@Cardshifter</a>
          </li>
      </ul>
    </div><!--/.nav-collapse -->

Rendering: