Difficulty aligning HTML header elements

Question

I'm trying to add the Twitter logo to my header (I use Bootstrap CSS), but it twists the alignment. I tried to put them side by side, but instead he pushed them. Here is 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> 

Here's what it looks like:

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> 

This seems like a slight improvement, as they have separate elements (note that the blue outline on the right only appears in my preview in brackets, and not in real execution):

I looked at CSS margin and padding in versions of <ul> and <div> with no visible improvements. If you want to see the code in context, it is currently hosted on Github until a solution is found. Desired layout side by side:

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

Answer 1

You can perform simple alignment of list items with ... 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 right solution, however, the error was noted as a comment on a question that (combined with the accepted answer) completely fixes the problem:

The correct answer is below, also, what is the percentage of inline image width? That everything is bad there. Reset inline styles, do not use percentages for width on the bitmap, 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 works 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: