CSS: nav element jumping to a new line

I'm trying to build a website, where part of my code, contains a quote segment, and the idea is that I want some social links on the right side of it.

Unfortunately, my social links jumps to a line below my quote segment, instead of being on the same line, and I'm not sure why.

Heres my HTML:

<div class="quote--bar">
<div class="quote">
"To create an environment in which knowledge <br />
about information and its sphere can be obtained"
</div>
<nav class="socialImageContainer">
    <ul>
        <li><a href="#" class="logos twitterLogo"></a></li>
        <li><a href="#" class="logos instagramLogo"></a></li>
        <li><a href="#" class="logos facebookLogo"></a></li>
        <li><a href="#" class="logos tumblrLogo"></a></li>
        <li><a href="#" class="logos linkedInLogo"></a></li>
    </ul>
</nav>

And my LESS:

.quote--bar {
 padding-top: 20px;
 background: @BGColor2;
 display: inline-block;
 .quote {
  font-size: 24px;
  font-family: 'Merriweather', serif;
  color: @TXTColor2;
 }
}
.socialImageContainer {
 .logos {
  margin: 20px 0;
  float: right;
  width: 51px;
  height: 51px;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
}

If you have any idea what I might be doing wrong, it would be very much appreciated!