Difficulty aligning HTML header elements - css

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%;">#Cardshifter</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>
#Cardshifter</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>
#Cardshifter
</li>
</ul>
</div><!--/.nav-collapse -->
Rendering: